JQuery Show More Link 未显示所有隐藏的帖子文本
Posted
技术标签:
【中文标题】JQuery Show More Link 未显示所有隐藏的帖子文本【英文标题】:JQuery Show More Link not revealing all hidden text for post 【发布时间】:2020-10-11 08:38:28 【问题描述】:我有一个网站,在页面加载时会显示来自用户的大量故事。我只想显示每个故事的前 2 个句子,并带有一个显示更多链接,用户可以按下该链接。我试图合并这个问题link的接受答案中的代码。
前 2 行被隐藏,显示如我所愿,但我无法将 jQuery 附加到链接以触发并显示所有行。是选择器错误吗?
我的小提琴:link
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);
);
编辑:
创建上述 html 的 JQuery:
$(window).on('load', function ()
$.ajax(
url: 'serverside/stories.php',
method: 'POST',
dataType: 'json',
success: function(response)
$(".content").html("")
$(".total").html("")
if(response)
var total = response.length;
$('#intro') .append("<p>Get inspired by reading personal stories about anxiety</p>");
$.each(response, function()
$.each($(this), function(i, item)
var mycss = (item.Type == 1) ? ' style="color: #ffa449;"' : '';
$('.content').append('<div class="post"><div class="hideContent"><div class="post-text"> ' + item.MessageText + ' </div><div class="post-action"><input type="button" value="Like" id="like_' + item.ID + '_' + item.UserID + '" class="like" ' + mycss + ' /><span class="likesTotal" id="likes_' + item.ID + '_' + item.UserID + '">' + item.CntLikes + '</span></div></div>' + '<div class="showMore"><a href="#">Show more</a></div></div>');
);
);
);
);
【问题讨论】:
不是这个:var $content = $this.closest("hideContent");
应该是这个:var $content = $this.closest(".hideContent");
,在 hideContent 选择中添加了一个点
【参考方案1】:
需要为jquery代码和switchClass
函数添加两个JS脚本路径才能工作。此外,我已将变量名从$content
更改为content
(不重要)。另外,我添加了var content = $this.parent().prev()
用于切换类目的。
$(".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();
//Edit: Add console log here
//console.log(content[0].className);
//Edit 2: Add console log here
//console.log(content[0]);
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;
transition: all 0.25s linear; /* Edit 3: Add transition on height*/
.showContent
line-height: 1em;
height: auto;
transition: all 0.25s linear; /* Edit 3: Add transition on height*/
<!-- 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>
【讨论】:
谢谢。抱歉忘记放 jQuery 库链接。第二个链接是什么 ? jQueryUI -switchClass
函数需要它
我在代码sn-p中添加了控制台日志。检查代码 sn-p - //Edit: Add console log here
。当您单击show more
/ show less
时,浏览器的控制台将显示类名。
抱歉,我无法将 Ajax 查询代码翻译成 HTML,因为我对此缺乏经验。您可能还想再尝试一件事。使用控制台日志打印出 var content
...console.log(content[0]);
的目标您可以运行代码 sn -p 作为示例。
我不确定是什么导致了文本隐藏。您可以添加过渡属性来缓解问题。 transition: all 0.25s linear; /* Edit 3: Add transition on height*/
希望对您有所帮助。【参考方案2】:
查看我网站上的类似代码,我发现以下解决了该问题。因为内容 div 是页面加载时存在的父级,所以在 Ajax 请求创建 html 的其余部分之前,我使用它来附加到 showMore div。 谢谢你的帮助!
$(document).ready(function()
$(".content").on("click",".showMore a", function()
var $this = $(this);
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);
);
);
【讨论】:
以上是关于JQuery Show More Link 未显示所有隐藏的帖子文本的主要内容,如果未能解决你的问题,请参考以下文章