我有一个网站，当页面加载时，会显示一些来自用户的故事。 我想只显示每个故事的前2个句子，与一个显示更多的链接下，用户可以按。 我试着把这个问题链接的已接受答案中的代码整合进去。
顶部的两行被隐藏，显示也是我想要的，但是我无法将jQuery附加到激发和显示所有行的链接上。 是选择器错误吗？
我的小提琴:林克
Html（从窗口加载时的Ajax调用生成）:
<div class="post">
<div class="hideContent">
<div class="post-text">
Lorem ipsum dolor sit amet, ex mel graece iuvaret. Ius cu cetero nonumes complectitur, no clita accusam splendide pri. Ea sit tale democritum, ea meis rebum est..</div>
<div class="post-action">
<input type="button" value="Like" id="like_86_cmpq0" class="like">
<span class="likesTotal" id="likes_86_cmpq0">0</span></div>
</div>
<div class="showMore"><a href="#">Show more</a></div>
</div>
CSS:
.hideContent {
overflow: hidden;
line-height: 1em;
height: 2em;
}
.showContent {
line-height: 1em;
height: auto;
}
jQuery:
$(".showMore a").on("click", function() {
var $this = $(this);
//var $content = $this.parent().prev("div.content");
var $content = $this.closest("hideContent");
var linkText = $this.text().toUpperCase();
if(linkText === "SHOW MORE"){
linkText = "Show less";
$content.switchClass("hideContent", "showContent", 400);
} else {
linkText = "Show more";
$content.switchClass("showContent", "hideContent", 400);
}
$this.text(linkText);
});
需要为jquery代码和SwitchClass函数添加两个JS脚本路径才能工作。 此外，我已经将变量名从$content更改为content（不重要）。 另外，为了switch类的目的，我添加了var content=$this.parent().prev()。
null
$(".showMore a").on("click", function() {
var $this = $(this);
//var $content = $this.parent().prev("div.content");
/* var content = $this.closest(".hideContent") */
;
// Add this line
// Change $content to content
var content = $this.parent().prev()
var linkText = $this.text().toUpperCase();
if (linkText === "SHOW MORE") {
linkText = "Show less";
content.switchClass("hideContent", "showContent", 400);
} else {
linkText = "Show more";
content.switchClass("showContent", "hideContent", 400);
}
$this.text(linkText);
});.hideContent {
overflow: hidden;
line-height: 1em;
height: 2em;
}
.showContent {
line-height: 1em;
height: auto;
}<!-- jquery script path -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jqueryui script path-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="post">
<div class="hideContent">
<div class="post-text">
Lorem ipsum dolor sit amet, ex mel graece iuvaret. Ius cu cetero nonumes complectitur, no clita accusam splendide pri. Ea sit tale democritum, ea meis rebum est..</div>
<div class="post-action">
<input type="button" value="Like" id="like_86_cmpq0" class="like">
<span class="likesTotal" id="likes_86_cmpq0">0</span></div>
</div>
<div class="showMore"><a href="#">Show more</a></div>
</div>