在与文本相同的行上多读/少读，而不丢失href链接

Question

我希望read more / less在文本旁边，而不是像现在这样放在下面，不丢失链接，也不在var内容中使用p

即。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>，b后面有</p>，这迫使代码附加一些不需要的<p>标记

在下一个示例中，我假设您可能有多个.aaa元素，因此我决定使用.each遍历所有.aaa元素

​

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>

​

始终使用.trim()以避免任何空格