Question

我想阅读更多/更少的内容，以便在文本旁边而不是像现在这样，既不会丢失链接，也不会在 var 内容中使用 p
IE。 var content = $(".aaa" p) .html(); & $(".aaa p").html(html);

如何做到这一点，我在任何地方都找不到解决方案，总会丢失一些东西..提前致谢

  jQuery(function($) {
      var show_char = 280;
      var ellipses = "... ";
      var content = $(".aaa").html(); 

      if (content.length > show_char) {
        var a = content.substr(0, show_char);
        var b = content.substr(show_char - content.length);
        var html = a + "<span class='truncated'>" + ellipses + "</span><span class='truncated' style='display:none'>" + b + "</span><a class='read-more' href='#'>Read more</a>";
        $(".aaa").html(html);
      }

      $(".read-more").click(function(e) {
        e.preventDefault();
        $(".read-more").text() == "Read more" ? $(".read-more").text("Read less") : $(".read-more").text("Read more") //change here..
        $(".aaa .truncated ").toggle();
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="aaa">
  <p><a href="#">Lorem Ipsum</a> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>

Answer 1

问题是您处理的是 .html 而不是 .text，因此您的变量 a 前面有 <p> 和 {{ 1}} 的末尾有 b，这迫使代码附加一些不需要的 </p> 标签

在下一个示例中，我假设您可能有多个 <p> 元素，因此我决定使用 .aaa

遍历所有 .aaa 元素

.each

jQuery(function($) {
  $('.aaa').each(function(){
    var show_char = 280;
    var ellipses = "... ";
    var content = $(this).html(); 

    if (content.trim().length > show_char) {
      var a = content.trim().substr(3, show_char); // use 3 to avoid <p>
      var b = content.trim().substr(show_char - content.trim().length).replace('</p>' , '');  // replace the last </p>
      var html = a + "<span class='truncated'>" + ellipses + "</span><span class='truncated' style='display:none'>" + b + "</span><a class='read-more' href='#'>Read more</a>";
      // wrap the a into `<p></p>` then append the read more to it
      $(this).html('<p>' + html  + '</p>'); 
    }
  });

  $(".read-more").click(function(e) {
    e.preventDefault();
    $(this).text( ( i , v) => v == "Read more" ? "Read Less" : "Read more"); //change here..
    $(this).closest(".aaa").find(".truncated").toggle();
  });
});

总是使用 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="aaa"> <p><a href="#">Lorem Ipsum</a> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> <div class="aaa"> <p><a href="#">Lorem Ipsum</a> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> 来避免任何空格

与文本在同一行阅读更多/更少，而不会丢失 href 链接

1 个答案: