誰かが私にこのコードを説明できますか？

Question

こんにちは私は埋め込みにアニメーションを持っているリンクのリストのこのコードを使用しています。そのパディングを維持し、元の位置に戻ってアニメーション化しないために、クリックしたときに欲しかった。私が理解していないことは2つのことです。 "if (!$(this)"そのコードの部分と、どのリンクで現在のクラスを持っていないときは、どのように見つけるのですか？本当にありがとう！

$(function() { 
    $('#secondary_content_what_we_do li a').hover(function() { 
     if (!$(this).hasClass("current")) { 
      $(this).stop().animate({ 
       "paddingLeft": "10px" 
      }, 400).addClass('column_hover'); 
     } 
    }, function() { 
     if (!$(this).hasClass("current")) { 
      $(this).stop().animate({ 
       "paddingLeft": "0px" 
      }, 'slow').removeClass('column_hover'); 
     } 
    }); 

    $('#secondary_content_what_we_do a').click(function() { 
     $('a').removeClass('column_active').removeClass("current"); 
     $(this).addClass('column_active').addClass("current"); 
     $('#secondary_content_what_we_do li a').trigger('mouseleave'); 
     var url = $(this).attr('href'); 
     $('#loading_content').hide().load(url).fadeIn(1000); 
     return false; 
    }); 
}) 

私はコメント傾ける何らかの理由でUPDATE 。私は今理解していますが、私は自分のCSSにクラスを持っていないので、その行がどのように役立つか分かりません。

Answer 1

この文：

if (!$(this).hasClass("current")) 

は、いくつかのことをやっています。 （$(...)を使用して）this変数（これは、この場合、上に乗った要素を参照します）をjQueryオブジェクトにラップしてから、hasClass(...)メソッドを呼び出して、結果を通知します（!）。 「ホバーされた要素は、クラスを持っていない場合はを 『文は、あなたの質問の後半部分のために、私はあなたが言及していると考えたよう

』、ブロック内をコードを実行し、」現在の読み込みこの行に：

$('a').removeClass('column_active').removeClass("current"); 

そして、どのように選択したアンカーがcurrentのクラスを持っていない場合、それは動作します。 a要素にcurrentクラスが含まれていない場合、このステートメントは効果がありません（これがあなたが求めているものでない場合は教えてください）。

Answer 2

if (!$(this)は完全な式ではありません。 !は否定されます（たとえば、$(this).hasClass("current")）。もしあなたが!($(this).hasClass("current"))と書いていれば、それは同じように働くでしょう。その表現は「このオブジェクトが 'current'クラスを持たない場合」を意味します。

クラスは、「現在の」

$(this).addClass('column_active').addClass("current"); 

Answer 3

HTMLのDOM要素が同時に複数のクラスを持つことができますラインで物事に追加取得されます。それは明らかなことでしょうか？

Answer 4

$('#secondary_content_what_we_do li a') 

自体ID secondary_content_what_we_do持つ要素の子孫であるliの子孫であるALL a要素を選択します。したがって、このセレクタは、の配列のjQueryラップDOM要素を返します。関数内

this

キーワードは、イベント（click、hoverまたは任意）をトリガ単一 DOM要素を指します。私たちはそうaddClassとremoveClass

のようなjQueryの機能にアクセスできるように

$(this)は、単に再びjQueryオブジェクトとしてネイティブDOM this要素をラップします...我々は上で推移し、特定の要素ががクラスcurrentを（!オペレータがhasClass呼び出しの結果を逆に）持っていない場合、

$('#secondary_content_what_we_do li a').hover(function() { 
     if (!$(this).hasClass("current")) { 
      doSomething(); 
     } 
} 

はessentialy、我々はセレクタにマッチするすべての要素にカーソルを合わせると言っています次に何かをしなさい。