0

以下のような他の例のjqueryコードを見ると、なぜ彼はこのような変数を作るのですか

var moreLink = $('.truncate_more_link', obj); var moreLink = $('.truncate_more_link'); で
はない理由

そして、デフォルトオブジェクトでminTrailが何をするのか混乱しましたか??

そして、彼が何を意味するかの下のこの例では、別の混乱が生じています。

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 を持つ各要素に対して実行されます

したがって、このステートメントは、クラスが .truncate_more.

これvar moreLink = $('.truncate_more_link', obj);により、要素が 1 つずつ に割り当てられ、var morelink最終的にそれらのクリック ハンドラが設定されます。

そしてあなたの2番目の混乱について

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

body は配列であり、インデックスが 0 であるため、body の最初の文字にアクセスするには、このステートメントが使用されます。

于 2012-10-05T02:32:31.583 に答える
1

最初に見てみましょう..

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

特定のクラス truncate_more_link を選択し、コンテキスト obj には独自の親があります。

2番目..

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 に答える