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

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;
}

或

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

参见 fiddle :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();
       }
     });

这样您就可以在检查之前 trim 空白。

参见第二个 fiddle :https://jsfiddle.net/r89gg7tp/3/