Question

所以我不知道为什么这不起作用。我希望在另一个div有值时显示Div。我从stackoverflow获得了这个代码，它非常简单。但它对我不起作用。没有控制台错误..

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

如果.txt的html值大于0则显示btn-01。

但它没有。在我的网络检查员中，它只是说：

<div style="display: block;" class="btn-01"><p>Things</p></div>

如果我删除脚本，则说：

<div class="btn-01"><p>Things</p></div>

所以它确实做了些什么。我尝试将show更改为hide。但不行。

<div style="display: none;" class="btn-01"><p>Things</p></div>

我试过了：

$(document).ready(function(){
       if ($(".txt").html().length > 0) {
         $('.btn-01').addClass('showme);
       }                                           
     });

btn-01 css：

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

但那也没有用。有谁知道这里发生了什么？也许我应该使用else声明？非常感谢帮助。

JsFiddle

Answer 1

您需要设置按钮在窗口加载之前不显示任何内容，或者添加“else”语句来隐藏元素：

.btn-01{
  display:none;
}

OR

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

请参阅小提琴：https://jsfiddle.net/r89gg7tp/

需要考虑的重要事项

如果您在元素的开始和结束标记之间输入换行符，则会增加长度。您需要将txt div设置为以下格式：

<div class='txt'></div>

将功能更改为此更好：

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

这样你就可以在检查之前修剪空白。

见第二小提琴：https://jsfiddle.net/r89gg7tp/3/

Answer 2

您需要在样式表中使用“display：none”隐藏btn-01，然后执行脚本。我认为你有一个“display：none！important”，它覆盖了jquery show（）函数的内联样式。

Answer 3

这可能会对你有帮助。

 $(document).ready(function(){
       if (!$.trim($(".txt").html())){
           $('.btn-01').addClass('showme');
       }                                           
 });

如果您有任何疑问，请与我们联系。

Answer 4

您可以将.contents()与.toggle()：

一起使用

$(document).ready(function() {
  $('.btn-01').toggle($(".txt").contents().length > 0);
});

.btn-01{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="txt">
  <h3>Things Title</h3>
</div>

<div class="btn-01">
  <p>Things</p>
</div>

Answer 5

你们哪儿都好。我需要将代码放在一些Session文件（Ajax）中。现在它使用原始代码甚至是你提供的一些代码。

谢谢！

如果另一个div有内容，则显示div

5 个答案: