如何在WordPress中显示阅读更多和阅读更少按钮

Question

我正在从数据库中获取列表，现在我必须根据内容添加阅读更多和阅读更少按钮，但我没有得到它。我在控制台中没有收到任何错误。

if($loop->have_posts() ) {
while($loop->have_posts() ) {
    $loop->the_post();
    $tid = $loop->ID;

 $data .='<li>
        
        <div class="overflowSet"><div class="imgwrap" style="background-image:url('.get_the_post_thumbnail_url($tid).')"></div></div>
        <h5>'.wp_trim_words(get_the_title($tid),9, '...').'</h5>
        <p class="countcontent">'.$the_content.'</p>
    </li>';


    }
}

我添加了下面的脚本来显示阅读更多和更少

$data .='<script>
jQuery(function($){
var maxLength = 390;
var moretxt = "...Read More";
var lesstxt = "Read Less";

$(".countcontent").each(function($) {
    var myStr = $(this).text();
    if (jQuery.trim(myStr).length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append(\'<span class="more-text">' + removedStr + '</span>\');
      $(this).append(\'<a href="javascript:void(0);" class="read-more more">' + moretxt + '</a>\');

    }
  });

  $(".read-more").click(function() {
    if($(this).hasClass("more")){
        $(this).removeClass("more");
        $(this).text(lesstxt);
        $(this).siblings(".more-text").show();
    }
    else {
        $(this).addClass("more");
        $(this).text(moretxt);
        $(this).siblings(".more-text").hide();
    }

  });

 });

   </script>';

我在这段代码中遇到了问题

 jQuery(this).append(\'<span class="more-text">' + removedStr + '</span>\');
  jQuery(this).append(\'<a href="javascript:void(0);" class="read-more more">' + moretxt + '</a>\');

如果我添加下面的代码，那么我会得到文本。

 jQuery(this).append(\'<span class="more-text">Read less</span>\');
  jQuery(this).append(\'<a href="javascript:void(0);" class="read-more more">Read more</a>\');

Answer 1

var maxLength = 390;
var moretxt = "...Read More";
var lesstxt = "Read Less";
var removeStr;
var text = $('.countcontent').text();

$(".countcontent").each(function() {
  var textlength = $(this).text().length;
  if (textlength > maxLength) {
    var myStr = $(this).text();
    var newStr = myStr.substring(0, maxLength);
    var removedStr = myStr.substring(1, maxLength);
    $(this).empty().html(newStr);
    $(this).append('<span class="more more-text">' + moretxt + '</span>');
  } else {
    $(this).append('<sapn class="less less-txt">' + lesstxt + '</a>');
  }
});

$(".more-text").click(function() {
  if ($(this).hasClass("more")) {
    $(this).removeClass("more");
    $('.countcontent').empty();
    $('.countcontent').text(text);
  } else {
    $(this).addClass("more");
    $(this).text(moretxt);
    $(this).siblings(".more-text").hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="countcontent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>