jQuery 代碼在 while 循環中不起作用

Question

我得到了以下片段，當單擊“顯示更多”或“顯示更少”按鈕時，它會根據文本的長度顯示或隱藏文本。 此外，如果字符小於特定限制（例如 200），“顯示更多”或“顯示更少”按鈕將被隱藏。正如您在代碼段中看到的那樣，這工作正常。 如果字符少於 200 個則應該隱藏的 Show More 按鈕的問題在 while 循環中不起作用。 Rest 都可以根據需要正常工作。 只有這個隱藏按鈕的特定部分不起作用。

完整片段：

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

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 

 }

 ?>