jQuery - 可变文本长度。修剪后如何恢复到原来的 HTML？

Question

我需要完成什么？

点击 .box div 中的 "Limit to 10 words" 文本应该被限制在大约10个字。

点击 "Display all words" 应显示 .box div 中的所有文本。

我可以限制文本长度，但无法将其切换回原始状态。

HTML:

<a href="#" id="limit">Limit to 10 words</a> | <a href="#" id="nolimit">Display all words</a>
<div class="box">
  <p>
    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus nisl a leo laoreet tempor. Sed eget augue at lorem consectetur venenatis vestibulum nec sapien. Suspendisse accumsan dolor eu scelerisque condimentum. Vivamus velit diam, viverra sit amet blandit vitae, viverra eget ligula. In ut neque eu urna suscipit venenatis mattis vel urna. Donec eget dolor ut massa rutrum tempus. Proin id velit porttitor, ultricies magna et, ultrices est.
  </p>
</div>
<div class="box">
  <p>
    2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus nisl a leo laoreet tempor. Sed eget augue at lorem consectetur venenatis vestibulum nec sapien. Suspendisse accumsan dolor eu scelerisque condimentum. Vivamus velit diam, viverra sit amet blandit vitae, viverra eget ligula. In ut neque eu urna suscipit venenatis mattis vel urna. Donec eget dolor ut massa rutrum tempus. Proin id velit porttitor, ultricies magna et, ultrices est.
  </p>
</div>
<div class="box">
  <p>
    3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus nisl a leo laoreet tempor. Sed eget augue at lorem consectetur venenatis vestibulum nec sapien. Suspendisse accumsan dolor eu scelerisque condimentum. Vivamus velit diam, viverra sit amet blandit vitae, viverra eget ligula. In ut neque eu urna suscipit venenatis mattis vel urna. Donec eget dolor ut massa rutrum tempus. Proin id velit porttitor, ultricies magna et, ultrices est.
  </p>
</div>

JS:

$('#nolimit').click(function(e) {
    e.preventDefault();
  $('div.box').each(function() {
    var s = $(this).html();
    s = $.trim(s);
    $(this).html(s);
  });
});

$('#limit').click(function(e) {
    e.preventDefault();
  $('div.box').each(function() {
    var s = $(this).html();
    s = $.trim(s);
    tenWords = s.split(' ').slice(0,10).join(' ');
    $(this).html(tenWords);
  });
});

JSFIDDLE: https://jsfiddle.net/rvjnb7ed/

Answer 1

当尝试 "reset" 原始 HTML 时，您除了获得已经改变的 HTML 之外什么也没做。

相反，在收缩时，将原始 HTML 存储到 data-* 属性中。
重置的时候，把原来的HTML从元素的data

拉回来

jsFiddle demo

$('#nolimit').click(function(e) {
  e.preventDefault();
  $('div.box').each(function() {
    var s = $(this).data("html");   // Retrieve original
    $(this).html(s);
  });
});

$('#limit').click(function(e) {
  e.preventDefault();
  $('div.box').each(function() {
    var s = $(this).html();
    $(this).data("html", s);       // Store for later use
    var s = $.trim(s);
    var tenWords = s.split(' ').slice(0,10).join(' ');
    $(this).html(tenWords);
  });
});

---

这只是一个代码重制（做同样的事情）

$('div.box').html(function(i, v) {
  $(this).attr("data-html", v); // Store
});

$('#limit, #nolimit').click(function(e) {
  e.preventDefault();
  var limit = this.id == "limit";
  $('div.box').html(function(i,v) {
    return limit ? $.trim(v).split(' ').slice(0,10).join(' ') : this.dataset.html;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="limit">Limit to 10 words</a> | <a href="#" id="nolimit">Display all words</a>
<div class="box">
  <p>
    1. Suspendisse accumsan dolor eu scelerisque condimentum. Vivamus velit diam, viverra sit amet blandit vitae, viverra eget ligula. In ut neque eu urna suscipit venenatis mattis vel urna. Donec eget dolor ut massa rutrum tempus. Proin id velit porttitor, ultricies magna et, ultrices est.
  </p>
</div>
<div class="box">
  <p>
    2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus nisl a leo laoreet tempor. Sed eget augue at lorem consectetur venenatis vestibulum nec sapien. Suspendisse accumsan dolor eu scelerisque condimentum. Vivamus velit diam, viverra sit amet blandit vitae, viverra eget ligula. 
  </p>
</div>
<div class="box">
  <p>
    3. Sed eget augue at lorem consectetur venenatis vestibulum nec sapien. Suspendisse accumsan dolor eu scelerisque condimentum. Vivamus velit diam, viverra sit amet blandit vitae, viverra eget ligula. In ut neque eu urna suscipit venenatis mattis vel urna. 
  </p>
</div>