我有一个带有div的页面,这些div是由API提供的,有时API不返回任何数据,所以如果它不返回数据(检测到空div),则插入一个html按钮。
<div id="delivery_result"></div>
<div class="empty-state"><button id='update_subscription' class="btn-fix-subscription">There seems to be a issue with your payment method Please Click Here To Fix</button></div>
<script>
if ($('#delivery_result').contents().length == 0) {
$(document).ready(function(){
$("div#delivery_result").append("<button id='update_subscription' class="btn-fix-subscription">There seems to be a issue with your payment method Please Click Here To Fix</button>});
}
</script>
我也有隐藏的div。空-状态,并试图使用css来揭开它只是不工作,所以我正在尝试JS,但不知道JS废话我不在乎哪种方式,只要#delivery_result的div是空的(没有数据表单api),然后它会显示按钮,带他们正确的付款,然后api馈送数据。
我上面的代码不起作用,不管div是否为空,它都会显示按钮
所以总结一下:
#delivery_result:empty
?但是我不能让它工作我想不出如何从那里解开隐藏的div这不起作用,但这将是一个完美的解决方案,无论哪种情况,我都只是把代码搞乱了,请帮助:)
div.eq:empty ~ .empty-state {
display: block !important;
background-color: #ec3d10;
border: 1px solid red;
position: absolute;
bottom: 0;
z-index:1300;
}
.empty-state {
display: none;
}
发布于 2018-12-20 02:45:35
最简单的形式,就像这样?
function addButton() {
let button = `<button>Click Here</button>`;
$( "div:empty" )
.append(button);
}
addButton();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Has Content -->
<div>I've got content</div>
<div>I've got content</div>
<div>I've got content</div>
<!-- Not Content -->
<div></div>
<div></div>
<div></div>
发布于 2018-12-20 02:27:39
我认为你的javascript部分应该是这样的:
$(document).ready(function () {
if ($.trim($('#delivery_result').html()) == '') {
$("div#delivery_result").append('<button id="update_subscription" class="btn - fix - subscription">There seems to be a issue with your payment method Please Click Here To Fix</button>');
}
});
发布于 2018-12-20 02:29:12
你需要确保你使用引号的方式是一致的。
代码中断的部分原因是没有正确转义引号。
这样你就不需要在JavaScript中创建超文本标记语言了,代码将从隐藏的元素(现在的id为“空状态元素”)复制超文本标记语言。
<div id="delivery_result"></div>
<div id="empty-state-element" class="empty-state" style="display:none;">
<button id="update_subscription" class="btn-fix-subscription">
There seems to be a issue with your payment method Please Click Here To Fix
</button>
</div>
<script>
$(document).ready(function(){
var myDiv = $('#delivery_result');
if (myDiv.is(':empty')) {
myDiv.append($('#empty-state-element').html());
}
});
</script>
https://stackoverflow.com/questions/53857058
复制相似问题