Question

我有一个div放在另一个上面，如果里面的文字超过3个字符，我希望它消失。我试图使用下面的代码执行此操作，但它似乎不起作用。任何建议都将不胜感激。

$(document).ready(function() {
  if ($(#top).text().length > 3) {
    $(this).addClass('hide')
    $(this) removeClass('show');
  }
});

.show {
  visibility: visible;
}

.hide {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTml:

<div id="bottom" class="hide" Style="background-color: green;  width:398px; height:196px;">
  <div id="top" class="show" Style="background-color: blue; width:398px; height:196px;">
    <!-- PHP REQUEST THAT GIVES LATEST UPDATE GOES HERE. If text string is longer than 2 characters I want this to hide. -->textmorethan3characters
  </div>
</div>

Answer 1

$(document).ready(function() {
  if ($("#top").text().length > 3)
    $("#top").fadeOut(2000);
  else
     $("#top").fadeIn(2000);
});

#top,#bottom{
width:398px; 
height:196px;
color:#fff;
}
#top{background-color: blue;}
#bottom{background-color: green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bottom">
  <div id="top">sdadsdsad</div>
</div>

Answer 2

您的代码中存在语法错误。

$(#top)需要由$("#top")替换（请参阅周围的引号）。
.功能之前缺少removeClass。

纠正上述问题，您的代码的主要问题是错误地使用了$(this)。你认为它会指向#top，但它没有。

纠正所有这些，下面是一个工作示例：

$(document).ready(function() {
  if ($("#top").text().length > 3) {
    $("#top").removeClass('show').addClass('hide');
  }
});

.show {
  visibility: visible;
}

.hide {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTml:

<div id="bottom" class="hide" Style="background-color: green;  width:398px; height:196px;">
  <div id="top" class="show" Style="background-color: blue; width:398px; height:196px;">
    <!-- PHP REQUEST THAT GIVES LATEST UPDATE GOES HERE. If text string is longer than 2 characters I want this to hide. -->textmorethan3characters
  </div>
</div>

如果文本字符串长度超过3个字符，请隐藏div

2 个答案: