JQuery Show More Link 未显示所有隐藏的帖子文本

Question

我有一个网站，在页面加载时会显示来自用户的大量故事。我只想显示每个故事的前 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>');
          });
        });
      }
    });
});

Answer 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>

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

});