javascript - Jquery readmore 插件让我困惑的 3 个问题

Question

我在其他示例 jquery 代码中看到如下所示，为什么他要创建这样的变量

var moreLink = $('.truncate_more_link', obj);
为什么不 var moreLink = $('.truncate_more_link');

我很困惑 minTrail 在默认对象中做什么？

另一个人在下面这个例子中感到困惑，他的意思是，为什么 body.length - 1 这样做？

var str2 = body.substring(splitLocation, body.length - 1);

当我们想在适当的情况下使用indexof时，这件事...??

完整的代码示例:

(function($){  
 $.fn.truncate = function(options) {  

  var defaults = {  
   length: 300,  
   **minTrail: 20,**  
   moreText: "more",  
   lessText: "less",  
   ellipsisText: "..."  
  };  

  var options = $.extend(defaults, options);  

  return this.each(function() {  
   obj = $(this);  
   var body = obj.html();  

   if(body.length > options.length + **options.minTrail**) {  
    var splitLocation = body.indexOf(' ', options.length);  
    if(splitLocation != -1) {  
     // truncate tip  
     var splitLocation = body.indexOf(' ', options.length);  
     var str1 = body.substring(0, splitLocation);  
     **var str2 = body.substring(splitLocation, body.length - 1);**  
     obj.html(str1 + '<span class="truncate_ellipsis">' + options.ellipsisText +   
      '</span>' + '<span  class="truncate_more">' + str2 + '</span>');  
     obj.find('.truncate_more').css("display", "none");  

     // insert more link  
     obj.append(  
      '<div class="clearboth">' +  
       '<a href="#" class="truncate_more_link">' +  options.moreText + '</a>' +   
      '</div>'  
     );  

     // set onclick event for more/less link  
     **var moreLink = $('.truncate_more_link', obj);**  
     **var moreContent = $('.truncate_more', obj);**  
     **var ellipsis = $('.truncate_ellipsis', obj);**  
     moreLink.click(function() {  
      if(moreLink.text() == options.moreText) {  
       moreContent.show('normal');  
       moreLink.text(options.lessText);  
       ellipsis.css("display", "none");  
      } else {  
       moreContent.hide('normal');  
       moreLink.text(options.moreText);  
       ellipsis.css("display", "inline");  
      }  
      return false;  
       });  
    }  
   } // end if  

  });  
 };  
})(jQuery);  

希望您的回答!!

Answer 1

第一件事

var moreLink = $('.truncate_more_link', obj);

why not var moreLink = $('.truncate_more_link');

obj 是上下文..which obj = $(this); 因此它只会获取 class=truncate_more_link 的后代元素

jQuery 你可以传入一个上下文，它的工作方式与使用 find.. 相同，因此相当于

$('.truncate_more_link', obj);

将是

$(obj).find('.truncate_more_link');

第二件事

Why body.length - 1 do??

var str2 = body.substring(splitLocation, body.length - 1);

var body = obj.html(); 表示它获取当前元素内的所有内容。body.length - 1 等于内容中的最后一个字符。因为它的索引为 0 - 所以子字符串从 splitlocation 索引开始一直到结束