Html JQuery显示更多链接不显示帖子的所有隐藏文本

我有一个网站，当页面加载时，它会显示许多用户的故事。我只想显示每个故事的前两句话，下面有一个ShowMore链接，用户可以按。我试图将这个问题的公认答案中的代码合并起来

前2行被隐藏，显示如我所愿，但我无法将jQuery附加到链接以激发并显示所有行。是选择器错误吗

我的小提琴：

Html（从窗口加载时的Ajax调用生成）：

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

$（窗口）.on（'load'，函数（）{
$.ajax({
url:'serverside/stories.php'，
方法：“POST”，
数据类型：“json”，
成功：功能（响应）{
$（“.content”）.html（“”）
$（“.total”）.html（“”）
如果（答复）{
var total=响应长度；
$（“#简介”）.append（从阅读关于焦虑的个人故事中获得灵感
”；
}
$.each（响应，函数（）{
$。每个（$（本），功能（i，项）{
var mycss=（item.Type==1）？'style=“color:#ffa449；”：“”；
$（'.content'）.append（''+item.MessageText+''+item.CntLikes+''）；
});
});
}
});
});

需要为jquery代码和

switchClass

函数添加两个JS脚本路径。此外，我已经将变量名从

$content

更改为

content

（不重要）。另外，为了开关类的目的，我添加了

var content=$this.parent（）.prev（）

$（.showMore a”）。在（“单击”，函数（）上{
var$this=$（this）；
//var$content=$this.parent（）.prev（“div.content”）；
/*var content=$this.closest（“.hideContent”）*/
//添加这一行
//将$content更改为content
var content=$this.parent（）.prev（）
var linkText=$this.text（）.toUpperCase（）；
//编辑：在此处添加控制台日志
//console.log（内容[0].className）；
//编辑2：在此处添加控制台日志
//console.log（内容[0]）；
如果（linkText==“显示更多”）{
linkText=“显示较少”；
switchClass（“hideContent”，“showContent”，400）；
}否则{
linkText=“显示更多”；
content.switchClass（“showContent”、“hideContent”，400）；
}
$this.text（linkText）；
});
.hideContent{
溢出：隐藏；
线高：1米；
高度：2米；
过渡：所有0.25s线性；/*编辑3：在高度上添加过渡*/
}
.展示内容{
线高：1米；
高度：自动；
过渡：所有0.25s线性；/*编辑3：在高度上添加过渡*/
}

Lorem ipsum dolor sit amet，ex mel graece iuvaret。如果没有完整的阴蒂，就不会有阴蒂。一个故事，一个故事，一个故事，一个故事。。
0
查看我网站上类似的代码，我发现下面的代码解决了这个问题。因为content 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);
});

});

这不是：
var$content=$this.closest（“hideContent”）
suppost为this:
var$content=$this.closest（“.hideContent”），在hideContent选择中添加了一个点谢谢。很抱歉，忘记将jQuery库链接放入。第二个链接是什么？jQueryUI-u需要它来实现
switchClass
功能我在代码段中添加了控制台日志。检查代码段-
//编辑：在此处添加控制台日志
。当您单击
显示更多
/
显示更少
时，浏览器中的控制台将显示类名。很抱歉，我无法将Ajax查询代码转换为HTML，因为我对此缺乏经验。你可能想再试一件事。使用控制台日志打印出var
内容的目标<代码>控制台日志（内容[0]）您可以运行示例代码段。我不确定是什么原因导致文本隐藏。您可以添加transition属性来缓解此问题<代码>过渡：所有0.25s线性；/*编辑3：在高度上添加过渡*/
希望有帮助。
$(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>');
          });
        });
      }
    });
});

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

});