可重用的 jQuery 截断函数答案

【问题标题】：Reusable jQuery truncate function可重用的 jQuery 截断函数
【发布时间】：2013-12-11 21:52:46
【问题描述】：

所以我创建了以下代码来处理一个字符串实例，该实例需要截断可展开和可折叠的点击事件。

$(document).ready(function () {
    var Element = $("[class*='truncate']");
    var FullText = $(".truncate").text();
    var Show = "<span class='show'> [...]</span>";
    var Hide = "<span class='hide'> [ ]</span>";
    var shortString = FullText.substring(0, 5);

    if (FullText.length > 5) {
        $(Element).html(shortString + Show);
    }

    $(Element).on("click", ".show", function () {
        $(Element).html(FullText + Hide);
    });

    $(Element).on("click", ".hide", function () {
        $(Element).html(shortString + Show);
    });    
});

截断以下 HTML

<div class="truncate">MBK-40B-FRLBBLCSLWLHBLHSLSALSAS32PDL</div>

上面的代码非常适合.truncate 类的一个实例，但是当添加更多东西时会变得有点混乱。当这个类有很多元素时，我怎样才能使这段代码工作，其中一些需要被截断而另一些不需要？

【问题讨论】：

要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是题外话，因为它们往往会吸引固执己见的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决该问题所做的工作。
@Rooster 我没有要求任何人推荐图书馆、工具等，您可能希望重读我的帖子？
@KevinB Wowa 我明确要求指点，而不是完整的解决方案。
大家静下心来，借这个机会解释一下jQuery的.each()
@KevinB 发起一场火焰战争的方式，实际上甚至不会回复该评论。

标签： javascript jquery function each truncate

【解决方案1】：

我们可以了解.each() jQuery 方法，这里有一些文档：http://api.jquery.com/each/

.each() 将遍历使用选择器找到的每个元素，并允许您通过 this 关键字访问它，从而允许您一次为一个元素运行代码。

$(document).ready(function () {
  var Show = "<span class='show'> [...]</span>";
  var Hide = "<span class='hide'> [ ]</span>";

  $(".truncate").each(function(){
    var Element = this;
    var FullText = $(Element).text();
    var shortString = FullText.substring(0, 5);
    if (FullText.length > 5) {
      $(Element).html(shortString + Show);
    }

    $(Element).on("click", ".show", function () {
      $(Element).html(FullText + Hide);
    });

    $(Element).on("click", ".hide", function () {
      $(Element).html(shortString + Show);
    });
  });
});

有更好的方法可以做到这一点，但.each() 是一种快速解决方法。我要担心的是关闭所有这些侦听器，我不确定您以后对代码做了什么，但您不希望出现内存问题。有什么建议吗？

【讨论】：

以后不会对这段代码做任何其他事情，它只是为了截断字符串和根据用户的意愿展开/折叠。你能解释一下可能的内存问题吗？
我使用 Backbone.js，这是一个问题，因为你从不刷新页面。如果您为 html 元素创建事件侦听器，然后将这些元素替换为其他元素，则第一个元素不会从内存中删除，因为它们与事件侦听器链接。在您的情况下，如果您设置一次，那么当用户导航页面时刷新，我想这没什么大不了的。但是仅供参考，要删除 .on()，您可以使用 .off(), the docs are here
非常感谢您的帮助和代码。（你的例子错过了结尾}）；顺便说一句）同样，当使用它时，折叠功能会中断。我之前尝试使用 this 关键字时遇到过这个问题。
太棒了 - 正是我想要的，谢谢！我知道我自己很接近啊哈。我会接受这个答案。

【解决方案2】：

https://jsfiddle.net/5dtmm9kn/

JS

              $('[truncate]').each(function( index ) {
                var howmuch = $(this).attr('truncate');
                var title = $( this ).text();
                var shortText = jQuery.trim(title).substring(0, howmuch)
                  .split(" ").slice(0, -1).join(" ") + " <span>...</span>";
                $( this ).html(shortText);
              });

html

<h3 truncate="40">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>

css

  [truncate] span{ 
    font-size: 0.6em;
    opacity: 0.6;
  }

【讨论】：