JQuery Показать больше Ссылка не показывает весь скрытый текст для публикации

Question

У меня есть сайт, на котором отображается ряд историй от пользователей при загрузке страницы. Я хочу отобразить только первые 2 предложения каждой истории со ссылкой «Показать больше», под которой пользователь может нажать. Я попытался включить код из принятого ответа на этот вопрос ссылка .

Верхние 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);
});

EDIT:

JQuery, который создает html выше:

$(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

Необходимо добавить два пути к сценарию JS, чтобы коды jquery и функция switchClass работали. Кроме того, я изменил имя переменной с $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, я использовал его для присоединения к div showMore. Спасибо yinsweet за вашу помощь!

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

});