Question

我需要完成什么？

点击.box div中的“限制为10个字”文字应限制为约。 10个字。

点击“显示所有单词”，.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

当尝试“重置”原始HTML时，除了获取已经改变的HTML之外什么都不做。

相反，缩小时，请将原始HTML存储到data-*属性中重置时，从元素的data

中拉回原始HTML

<强> 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>

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

1 个答案: