gpt4 book ai didi

jquery - 单击时不隐藏文本

转载 作者:可可西里 更新时间:2023-11-01 13:25:31 25 4
gpt4 key购买 nike

我有六个框,每个框包含一个段落,每个段落具有不同的内容。字符限制设置为 200 个字符。 200 个字符后,其余内容(如果有)将被隐藏,直到用户单击 Show More 链接。

当用户单击Show Less 链接时,文本显示回到字符限制。然而,事实并非如此;当用户单击Show More 链接时,将显示所有内容,但当用户单击Show Less 链接时,内容不会收缩。

我看到其他有关显示和隐藏内容的 SO 帖子,但在实现他们的答案以解决我的问题后,我仍然迷路了。这是我第一次实现 jQuery,所以请原谅我在如此初级的水平上的困惑。

对于为什么 Show Less 不压缩内容的任何建议,我们表示赞赏。

<div class="col-md-8" id="article">
<?php
$text = $page->Article_Text;
?>

<script>
$(document).ready(function(){
var readMoreHTML = $(".read-more").html();
var lessText = readMoreHTML.substr(0, 200);

if(readMoreHTML.length > 200){
$(".read-more").html(lessText).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>");
} else{
$(".read-more").html(readMoreHTML);
}
$("body").on("click", ".read-more-link", function(event){
event.preventDefault();
$(this).parent(".read-more").html(readMoreHTML).append("<a href=''class='show-less-link' style='color:gray; text-decoration:none'>Show Less</a>");
});
$("body").on("click", ".show-less-link", function(event){
event.preventDefault();
$(this).parent(".read-more").html(readMoreHTML.subtr(0,200)).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>");
});
});
</script>


<div class="content">
<div class="read-more">
<?php echo $text ?>
</div>
</div>

</div><!--#article-->

(请原谅内联 CSS,因为它仅用于测试目的)。

最佳答案

在你的 JS 的最后一部分,只需使用你的 lessText 变量,它就会起作用。 jQuery .html() 方法不能接受 readMoreHTML.subtr(0,200) 作为输入。

$(this).parent(".read-more").html(lessText).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>");

工作代码笔: http://codepen.io/staypuftman/pen/akZdzg

还有这里附上的运行代码。你可以检查输出

    $(document).ready(function () {
var readMoreHTML = $(".read-more").html();
var lessText = readMoreHTML.substr(0, 200);

if (readMoreHTML.length > 200) {
$(".read-more").html(lessText).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>");
} else {
$(".read-more").html(readMoreHTML);
}
$("body").on("click", ".read-more-link", function (event) {
event.preventDefault();
$(this).parent(".read-more").html(readMoreHTML).append("<a href=''class='show-less-link' style='color:gray; text-decoration:none'>Show Less</a>");
});
$("body").on("click", ".show-less-link", function (event) {
event.preventDefault();
$(this).parent(".read-more").html(lessText).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="read-more">
Details of G.M.’s decision-making process almost 20 years ago, which has not been reported previously, suggest that a quest for savings of just a few dollars per airbag compromised a critical safety device, resulting in passenger deaths. The findings also indicate that automakers played a far more active role in the prelude to the crisis: Rather than being the victims of Takata’s missteps, automakers pressed their suppliers to put cost before all else.
</div>

关于jquery - 单击时不隐藏文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39173944/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com