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个字符。那是因为它将所有文本的计数加在一起。但是它应该分别为每条记录单独计数，并根据每个帖子的字符数进行工作。该怎么做？

同时使用循环元素。

<?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();
  }
});

Answer 2

如何计算php中的内容，然后决定显示哪个html元素？

<?php while($content = $contents->fetch()){ 

if (strlen($content) > 200)
{
?>
    <!-- HTML content with show more -->
    <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 
}
else 
{

?>

<!-- Html Code to display text that contains less than 200 characters -->

<?php 

 }

 ?>

jQuery代码无法在while循环内运行

2 个答案: