Question

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

$(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的一个实例，但是当添加更多内容时会有点混乱。当这个类有很多元素时，我怎么能使这个代码工作，其中一些元素需要被截断而其他元素不需要？

Answer 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()是一个快速修复。我要关注的是关闭所有听众，我不确定你以后用你的代码做什么，但你不想要内存问题。有什么建议吗？

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

可重用的jQuery截断函数

2 个答案: