Question

我在我的程序中使用readmore javascript并运行，但答案不正确。

当我点击“查看更多”时，它会减少输出，当我点击“更少”时，它会“看到更多”。即它显示的应该与它应该是相反的。

我尝试更改代码，但无法正常运行。

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script>
  $(document).ready(function() {
    // Configure/customize these variables.
    var showChar = 50; // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Show more >";
    var lesstext = "Show less";

    $('.more').each(function() {
      var content = $(this).html();

      if(content.length > showChar) {
        var c = content.substr(0, showChar);
        var h = content.substr(showChar, content.length - showChar);
        var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
        $(this).html(html);
      }
    });

    $(".morelink").click(function(){
      if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
      } else {
        $(this).addClass("less");
        $(this).html(lesstext);
      }

      $(this).parent().prev().toggle();
      $(this).prev().toggle();

      return false;
    });
  });
  </script>
  <title>jQuery Read More/Less Toggle Example</title>
</head>
<body>
  <span class="more">
    Lorem ipsum dolor sit dolore magna aliqua.Excepteur sint occaecat cupidatat anim id est laborum.
  </span>
  <br><br>
  <div class="more">
    Morbi placerat imperdiet arcu massa. In hac <a href="#">habitasse</a> platea dictumst.  <em>convallis magna nunc</em>, id rhoncus massa ornare in. 
  </div>
</body>
</html>

Answer 1

您在.morelink click处理程序中将错误的文本放入锚点。你需要改变它如下：

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(lesstext);
    } else {
        $(this).addClass("less");
        $(this).html(moretext);
    }
    // rest of code here
}

要在开头显示正确的标签，您还必须更改在文档加载时创建的html内容（moretext到lesstext）：

var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + lesstext + '</a></span>';

然后它将以您想要的方式运行，但要正确剪切文本，您将不得不更改代码。

如果对我的期望做出相反的反应，请阅读

1 个答案: