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

Posted 2023-03-31

【中文标题】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);
);

);