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时，

las事情...... ??

完整的代码示例：

(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）;

为什么不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索引的 - 所以substring从splitlocation索引一直开始直到最后

Answer 2

.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中的第一个字符，使用了这个语句。

Answer 3

让我们先看看..

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

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

第二..

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

     find the substring on splitlocation in context  with length the body minus 1;

3个问题Jquery阅读更多插件让我困惑

完整的代码示例：

3 个答案: