首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何检测空的div,然后使用JS或css插入html按钮

如何检测空的div,然后使用JS或css插入html按钮
EN

Stack Overflow用户
提问于 2018-12-20 02:16:49
回答 3查看 440关注 0票数 1
  1. 列表项

我有一个带有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是否为空,它都会显示按钮

所以总结一下:

  1. 检测div ID delivery_result是否为空,如果是,取消隐藏.空状态,这样按钮将显示
  2. 可能是#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;
}
EN

回答 3

Stack Overflow用户

发布于 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>

票数 4
EN

Stack Overflow用户

发布于 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>');
        }
    });
票数 0
EN

Stack Overflow用户

发布于 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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53857058

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档