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

Posted 2023-05-09

【中文标题】如何在WordPress中显示阅读更多和阅读更少按钮

【英文标题】：How to display the read more and read less button in WordPress

【发布时间】：2021-08-22 06:18:10

【问题描述】：

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

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

【问题讨论】：

当我检查检查元素时，我没有得到我的脚本，它只显示 0

【参考方案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>

【讨论】：

对不起，我没明白你的意思。而且我没有收到此代码的错误。我的 jquery 有问题

我在函数末尾使用了 echo $data; wp_die();

如果使用，则追加存在一些问题。

这就是为什么我建议你使用 console.log removeStr。变量removedStr和moretxt在某处出现故障。做一个 console.log 并检查内容。如果您对其进行硬编码，它就像我从上面的演示代码中看到的那样工作。

我 100% 是 append 的问题，但找不到 .... 是正确的 jQuery(this).append(\''+已移除Str + '\');