javascript - jQuery 代码在 while 循环中不起作用

Question

我得到了以下代码片段，当单击“显示更多”或“显示更少”按钮时，它会根据文本的长度显示或隐藏文本。此外，如果字符少于特定限制(例如 200)，“显示更多”或“显示更少”按钮将被隐藏。如您在代码片段中所见，这工作正常。如果字符少于 200，显示更多按钮应该隐藏的问题在 while 循环中不起作用。其余一切都根据需要正常工作。只有这个隐藏按钮的特定部分不起作用。

完整片段:

var lengthofContent = $(".content").text();
console.log(lengthofContent.length);
if(lengthofContent.length < 200){
  $(".show-more").hide();
}
$(".show-more span").click(function() {
  var $this = $(this);
  var $content = $this.parent().prev(".content");
  var linkText = $this.text().toUpperCase();
  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    $content.toggleClass("hideContent showContent");
  } else {
    linkText = "Show more";
    $content.toggleClass("showContent hideContent");
  }
  $this.text(linkText);
});

.text-container {
  width: 500px;
  margin: 0 auto;
}
.hideContent {
  overflow: hidden;
  line-height: 1em;
  height: 55px;
}
.showContent {
  line-height: 1em;
  height: auto;
}
.showContent {
  height: auto;
}
.show-more span {
  cursor: pointer;
  color: #27aae1;
}
.text-container {
  padding: 10px;
  background: #fff;
}
.text-container p {
  line-height: 1.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-container">
  <div class="content hideContent">
    <p>
      This is more than 200 characters. Lorem Ipsum is simply dummy text of the printing and typesetting. Lorem Ipsum is simply dummy text of the printing and typesetting.
    </p>
  </div>
  <div class="show-more">
    <span>Show more</span>
  </div>
</div>
<div class="text-container">
  <div class="content hideContent">
    <p>
      This is less than 200 characters. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
  </div>
  <div class="show-more">
    <span>Show more</span>
  </div>
</div>

在 while 循环中不起作用的代码。

var lengthofContent = $(".content").text();
console.log(lengthofContent.length);
if(lengthofContent.length < 200){
  $(".show-more").hide();
}

console.log 显示文本计数 680。这就是它不起作用的原因。但并非所有来自数据库的记录都超过 200 个字符。那是因为它将所有文本的计数加在一起。但它应该单独计算每条记录并根据每个帖子的字符数进行工作。如何做到这一点？

While 循环元素。

<?php while($content = $contents->fetch()){ ?>
    <div class="text-container">
        <div class="content hideContent">
            <p><?php echo $content['uc_desc']; ?></p>
        </div>
        <div class="show-more">
            <span>Show more</span>
        </div>
    </div>
<?php } ?>

当您将文本缩短到少于 200 个字符时，看看我在说什么。显示更多按钮被隐藏，这就是 while 循环中不起作用的原因。任何帮助将不胜感激。

Answer 1

问题是您需要遍历每个内容区域并应用逻辑。

删除这个...

var lengthofContent = $(".content").text(); 
console.log(lengthofContent.length); 
if(lengthofContent.length < 200){ 
$(this).find(".show-more").hide(); 
}

并添加这段代码

$('.content').each(function(k,v){
  if ($(v).text().length < 200) {
    $(v).removeClass('hideContent');
    $(v).next().hide();
  }
});