jQuery 文本受限時隱藏“顯示更多”按鈕

Question

我正在嘗試對文本使用“顯示更多/顯示更少”按鈕來擴展和收縮長文本/段落。 該代碼似乎在各個方面都運行良好。 唯一的一個缺陷是，即使文本有限（比如只有 1 行），我仍然可以看到顯示更多按鈕。 如何設置僅在顯示一定數量的行或文本（例如 3 行或 50 個字或任何此類可能的限制）時才出現按鈕的條件。 我不知道該怎么做，因為我在 jQuery 中不是那么好。 因此，我在這里尋求解決方案。

代碼筆：[ https://codepen.io/zoomkraft/pen/ZEELQXL ][1]

在上面的示例中，嘗試刪除將其限制為僅 1 或 2 行的段落。 顯示更多按鈕仍會在不需要時顯示，因為沒有太多可擴展的文本。 對於此類有限的文本，應該隱藏。

[1]: https://codepen.io/zoomkraft/pen/ZEELQXL

更新

HTML 進入 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 } ?>

Answer 1

您能否將另一個 class 添加到顯示選項中。 像這樣

<div class="show-more show-option">
    <span>Show more</span>
</div>

然后直接在腳本標簽中添加以下內容。

$('.content').each(function(key,value){
  var lengthofContent = $(value).text();
  if(lengthofContent.length < 200)
    $(value).siblings('show-option').hide();
});

200 的值可以根據您想要的數字進行最佳配置。

Answer 2

我得到了為什么它不能在 while 循環中工作的解決方案。

刪除了這個

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