使用 wrap/unwrap 阅读更多信息

Question

我正在尝试使用 wrap 方法制作“多读少读”，但它仅适用于显示更多。
所以基本上如果文本比我需要的长，我会去掉它并添加一个 read-more-link （有效）。取消剥离后，我添加了一个 read-less-link 应该将其剥离到以前的长度，以便可以使用 read-more-link 再次取消剥离，但是wrap 在这里不起作用。

$(document).ready(function() {
  var maxLength = 490;
  $(".keimeno").each(function() {
    var myStr = $(this).text();
    if ($.trim(myStr).length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append(' <a href="javascript:void(0);" class="read-more">...read more</a>');
      $(this).append('<span class="more-text">' + removedStr + ' <a href="javascript:void(0);" class="read-less">read less</a>' + '</span>');
    }
  });
  
  $(".read-more").click(function() {
    $(this).siblings(".more-text").contents().unwrap();
    $(this).remove();
  });
  
  $(".read-less").click(function() {
    $(this).remove();
    $(this).siblings(".more-text").contents().wrap();
  });
});

.keimeno .more-text {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Spicy+Rice&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />

<div class="card">
  <ul id="kirio">
    <li>
      <div class="col-lg-12">
        <p class="keimeno">
          SOME TEXT asdasdas SOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME
          TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT MORE TEXT MOREOME TEXT MORE TEXT MOREOME TEXT MORE TEXT MOREOME TEXT MORE
          TEXT MOREOME TEXT MORE TEXT MOREOME TEXT MORE TEXT MORE
        </p>
      </div>
    </li>
    <li>
      <div class="col-lg-12">
        <p class="keimeno">
          SOME TEXT asdasdas SOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME
          TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME
          TEXT asdasdas
        </p>
      </div>
    </li>
  </ul>
</div>

jsfiddle：https://jsfiddle.net/b9nsmyvu/1/

Answer 1

您可以使用在$(document).ready(); 上执行的文本操作创建一个函数，并在单击“少读”时调用该函数。另请注意，有必要从document 等静态父元素委托click() 事件用于“阅读更多”和“阅读更少”，因为它们都是动态添加到页面的。

$(document).ready(function() {
  function readMore() {
    var maxLength = 490;
    $(".keimeno").each(function() {
      var myStr = $(this).text();
      if ($.trim(myStr).length > maxLength) {
        var newStr = myStr.substring(0, maxLength);
        var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
        $(this).empty().html(newStr);
        $(this).append(' <a href="javascript:void(0);" class="read-more">...read more</a>');
        $(this).append('<span class="more-text">' + removedStr + ' <a href="javascript:void(0);" class="read-less">read less</a>' + '</span>');
      }
    });

  }
  readMore();
  $(document).on("click", ".read-more", function() {
    $(this).siblings(".more-text").contents().unwrap();
    $(this).remove();
  });

  $(document).on("click", ".read-less", function() {
    $(this).remove();
    readMore();
  });
});

.keimeno .more-text {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <ul id="kirio">
    <li>

      <div class="col-lg-12">
        <p class="keimeno">
          SOME TEXT asdasdas SOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME
          TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT MORE TEXT MOREOME TEXT MORE TEXT MOREOME TEXT MORE TEXT MOREOME TEXT MORE
          TEXT MOREOME TEXT MORE TEXT MOREOME TEXT MORE TEXT MORE
        </p>
      </div>



    </li>
    <li>

      <div class="col-lg-12">
        <p class="keimeno">
          SOME TEXT asdasdas SOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME
          TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME
          TEXT asdasdas
        </p>
      </div>


    </li>

  </ul>
</div>