0

我在下面的其他示例 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);

谢谢希望你的回答！！

4

3 回答 3

2

第一件事

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

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

obj 是上下文..obj = $(this); 所以它只会获取带有 class=truncate_more_link 的后代元素

jQuery，您可以在上下文中传递，它的工作方式与使用 find.. 相同，因此相当于

$('.truncate_more_link', obj);

将会

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

第二件事

为什么 body.length - 1 呢？

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

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

于 2012-10-05T02:36:20.947 回答
1

.truncate_more 是一个类，因此可能有超过 1 个元素具有同一个类。

现在，如果您注意到以下内容正在返回匿名函数返回的值。

  return this.each(function() {  
   obj = $(this);  
   .....................
   ...........................
   ..................................
   });

以上将对每个具有类名 .truncate_more 的元素执行

所以这个语句 lopps( 遍历所有类为 .truncate_more 的元素。

所以这var moreLink = $('.truncate_more_link', obj);将一个一个地分配元素，var morelink并最终为它们设置点击处理程序。

关于你的第二次困惑

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

由于 body 是一个数组并且索引为 0，因此要访问 body 中的第一个字符，使用此语句。

于 2012-10-05T02:32:31.583 回答
1

先来看看吧。。

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

它选择了具有上下文 obj 的特定类 truncate_more_link 有自己的父级。

第二..

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

     find the substring on splitlocation in context  with length the body minus 1;
于 2012-10-28T07:09:14.983 回答