Javascript 可重用jQuery截断函数

因此，我创建了以下代码来处理字符串的一个实例，该实例需要使用可展开和可折叠的单击事件进行截断

$(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);
    });    
});

$（文档）.ready（函数（）{
变量元素=$（“[class*='truncate']”）；
var FullText=$（“.truncate”）.text（）；
var Show=“…]”；
var Hide=“[]”；
var shortString=FullText.substring（0,5）；
如果（FullText.length>5）{
$（元素）.html（短字符串+显示）；
}
$（元素）。在（“单击”、“.show”上，函数（）{
$（元素）.html（全文+隐藏）；
});
$（元素）。在（“单击”，“隐藏”，函数（）{
$（元素）.html（短字符串+显示）；
});    
});

它将截断以下HTML

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

MBK-40B-frlbblcslwlhlhslsalsas32pdl

---

上面的代码对于类

.truncate

的一个实例非常有效，但是当添加更多的东西时会变得有点混乱。如果此类中有许多元素，其中一些元素需要截断，而其他元素则不需要截断，那么如何使此代码正常工作？

我们可以了解

。each（）

jQuery方法，下面是一些文档：

.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);
    });
  });
});

$（文档）.ready（函数（）{
var Show=“…]”；
var Hide=“[]”；
$（“.truncate”）.each（函数（）{
var元素=这个；
var FullText=$（元素）.text（）；
var shortString=FullText.substring（0,5）；
如果（FullText.length>5）{
$（元素）.html（短字符串+显示）；
}
$（元素）。在（“单击”、“.show”上，函数（）{
$（元素）.html（全文+隐藏）；
});
$（元素）。在（“单击”，“隐藏”，函数（）{
$（元素）.html（短字符串+显示）；
});
});
});

有更好的方法可以做到这一点，但是

。each（）

是一个快速解决方案。我所关心的是关闭所有的侦听器，我不确定您以后在用代码做什么，但您不希望出现内存问题。有什么建议吗？

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);
              });

css

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

---

要求我们推荐或查找工具、库或喜爱的非站点资源的问题对于堆栈溢出来说是离题的，因为它们往往会吸引固执己见的答案和垃圾邮件。相反，请描述这个问题以及迄今为止所做的工作。@Rooster我没有要求任何人推荐一个库、工具等，您可能希望重读我的文章？@KevinB Wowa我明确要求的是指针，而不是完整的解决方案。请大家冷静下来，利用这个机会来解释jQuery的

。each（）

@KevinB启动火焰之战的方式，字面上甚至不会对该评论作出回应。以后不会对该代码做任何其他操作，它只是用于截断字符串和按用户意愿展开/折叠。您能解释一下可能的内存问题吗？我使用Backbone.js，这是一个问题，因为您从未刷新页面。如果为html元素创建事件侦听器，然后用其他元素替换这些元素，则不会从内存中删除第一个元素，因为它们与事件侦听器链接。在您的情况下，如果您只设置了一次，那么当用户导航页面时就会刷新，我想这没什么大不了的。但仅供参考，要删除

.on（）

您使用的

.off（）

，非常感谢您的帮助和代码。（您的示例没有结束}）；顺便说一句）使用此功能时，折叠功能也会中断。我以前用这个关键词做实验的时候就有了。太棒了——完全符合我的要求。谢谢！我知道我离自己很近啊哈。我接受这个答案。

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