Question

所以这可能是一个简单的问题。但我不得不问，因为它没有做我想做的事。

这是按钮JavaScript：

$(document).ready(function(){
   if ($(".saved-items").html().length > 0) {
     $('.btn-01').show();
   }                                           
 });

如果div中有内容，则会显示该按钮。但如果div没有内容，我希望它再次隐藏。

我试过了：

$(document).ready(function(){
       if ($(".saved-items").html().length > 0) {
         $('.btn-01').show();
       }
       if ($(".saved-items").html().length < 0) {
         $('.btn-01').hide();
       }
 });

以下是添加项目时的HTML：

<div class="col-sm-2">
    <div class="saved-items"><h4>Items:</h4>
        <ul>
            <li><i class="fa fa-anchor" aria-hidden="true" style="color:#f60;margin-right:10px;"></i>RAW</li>
        </ul>

    <script>
        $(document).ready(function(){
          $('.btn-01').toggle($(".saved-items").html().trim().length > 0);               
         });
        </script>
        </div>
    </div>
    <div class="col-sm-2">                  
        <a class="fancybox my-subject" href="#contact-formulier" value="Item X"><div style="display: block;" class="btn-01">Check Out</div></a>
    </div>
</div>

这是没有保存任何项目的HTML：

<div class="col-sm-2">
  <div class="saved-items">
    <h4>Items:</h4>
  </div>
</div>
<div class="col-sm-2">
 <a class="fancybox my-subject" href="#contact-formulier" value="Item X"><div class="btn-01">Check Out</div></a>
</div>

但是没有去。这是btn-01的CSS：

.btn-01 {
    background: #f60;
    color: #fff;
    border-radius: 2px !important;
    padding: 5px;
    text-align: center;
    margin: 40px auto 0px auto;
    width: 90%;
    display: none;
    border:none;
}

Answer 1

您可以使用pythonw.exe来实现此目标：

toggle()

Working example

Answer 2

字符串的长度为零或大于零。可以小于零。

$(document).ready(function(){
   if ($(".saved-items").html().length > 0) {
     $('.btn-01').show();
   }else{
       $('.btn-01').hide();
   }
});

请检查https://jsfiddle.net/Shilpi/uhfruo1a/2/

根据另一个元素是否包含内容，无法显示或隐藏按钮

2 个答案: