Question

我正在制作这个脚本，它隐藏了一个包含超过100个字符的div的文本，并显示了一个＆＃34;更多＆＃34;链接哪个onclick显示更多文本。

问题是，目前点击它会显示所有剩余的文本，而我希望它只显示100多个字符，如果div包含更多文本，那么保持＆＃34;更多＆＃34;链接以获取更多文本，直到手动显示div的所有文本。

简而言之，如果div有500个字符的文本，我希望更多的链接显示5次，每100个字符一次。

javascript是：

$(document).ready(function() {
    var showChar = 100;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);

            var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<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;
    });
});

感谢您的帮助。

Answer 1

我希望这会对你有所帮助。

$(document).ready(function() {
  var showChar = 100;
  $(".more").each(function() {
    var content = $(this).html();

    if (content.length > showChar) {
      var arr = [];
      var pos = 0;
      for (var i = 0; i < content.length / showChar; i++) {
        arr.push(content.substr(pos, showChar));
        pos += showChar - 1;
      }
      var html = "";

      for (var i = 0; i < arr.length; i++) {
        html += `<div class="text-${i}" style="display: none;">`;
        html += arr[i];
        html += `  - <span id="more-${i}" style="color: red">more</span> <span id="less-${i}" style="color: green; display: none">less</span>`;
        html += "</div>";
      }

      $(this).text("");
      $(this).append(html);
      $(".text-0").css("display", "block");

      for (var i = 0; i < arr.length - 1; i++) {
        (function(index) {
          $(`#more-${index}`).on("click", function() {
            $(`.text-${index + 1}`).css("display", "block");
            $(`#more-${index}`).css("display", "none");
            $(`#less-${index}`).css("display", "inline-block");
          });
        })(i);
      }
    }
  });
});

$("*").on("click", function() {
  var arr = $("div");
  for (var i = 0; i < arr.length - 1; i++) {
    (function(index) {
      $(`#more-${index}`).on("click", function() {
        $(`.text-${index + 1}`).css("display", "block");
        $(`#less-${index}`).css("display", "inline-block");
        $(`#more-${index}`).css("display", "none");
      });

      $(`#less-${index}`).on("click", function() {
        $(`.text-${index + 1}`).css("display", "none");
        $(`#less-${index}`).css("display", "none");
        $(`#more-${index}`).css("display", "inline-block");
        for (var j = index + 1; j < arr.length; j++) {
          $(`.text-${j}`).css("display", "none");
          $(`#less-${j}`).css("display", "none");
          $(`#more-${j}`).css("display", "inline-block");
        }
      });
    })(i);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="more">
  I am making this script that hides the text of a div that has more than 100 characters and shows a "more" link which onclick reveals more text. The problem is, currently onclick it reveals all of the remaining text, whereas I want it to reveal only 100
  more characters and if the div contains more text then to keep the "More" link for more text until all the text of the div has been manually revealed. In short, if a div has a text of 500 chars, I want the more link to show 5 times, once every 100 chars.
  The javascript is:
</div>

动态隐藏并显示更多文本到某个字符Javascript

1 个答案: