无法根据其他元素是否包含内容来显示或隐藏按钮

Unable to make button show or hide depending on whether another element has content

本文关键字：显示 按钮 隐藏 包含内 是否 其他 元素      更新时间：2023-09-26

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

这是按钮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;
}

您可以使用toggle()来实现这一点：

$('.btn-01').toggle($(".saved-items").html().trim().length > 0);

工作示例

字符串的长度为零或大于零。。不能小于零。

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

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

相关文章：