jQuery - Navigation - 特定のIDが見つかった場合は、何かをしてください。

Question

ここで間違っていることを理解できないようです。私のコードを拡張し、特定するには

は仕事ではなく、クリックされた要素のidを見つけることのない、それはすべてのidの

http://jsfiddle.net/34a5b/が見つかった - 私はそれを置くが、あなたはそれが見つかっていることがわかりますので、アニメーション化する#item1、その後#item2私が探している

基本的な機能は次のようになります：Liは、特定のid>を見つけるクリックすると

>機能を行いますその特定のIDに対応

なぜこのdoes notの作品についてのアイデア？今、私は$ nav.each ....

---

を入れて、なぜ私はまた、そのような何かをすることのよりダイナミックな/シンプルな方法を把握しようとしていたが、私はその数字をcouldntのだろ

var $Nav= $('#Nav'); 
    var $Boxee= $('#BoxeeBox'); 
$Nav.each(function(){ 
    $(this).find('li').click(function() { 
     if($(this).find('#item1')){ 
      $Boxee.animate({ backgroundColor:'blue' }); 
     } 
     if($(this).find('#item2')){ 
      $Boxee.animate({ backgroundColor:'red' }); 
     } 
    }); 
}); 

驚きの驚き...私は誰かが私もまだ私のコードが動作しない理由を知りたいと思いますが、その人と一緒に方向に私を指すことができれば感謝します）

Answer 1

あなたがする必要はありませんループスルー$Nav。あなたが動作しないためにあなたのコードの$('#Nav li').click(...)

理由があると言う場合はjQueryのクリックは、すべてのliにバインドします：$(this).find('#item1') - ここ$(this)liを意味し、あなたが自分自身の中に#item1を見つけることがtyringしています。固定

：http://jsfiddle.net/34a5b/1/

var $Nav = $('#Nav li'); 
var $Boxee = $('#BoxeeBox'); 
$Nav.click(function() { 
    if (this.id == 'item1') { 
     $Boxee.animate({ 
      backgroundColor: 'blue' 
     }); 
    } 
    if (this.id == 'item2') { 
     $Boxee.animate({ 
      backgroundColor: 'red' 
     }); 
    } 
}); 

わずかに良い（パフォーマンス）のバージョンは.delegate（http://jsfiddle.net/34a5b/9/）を使用することです：

$('#Nav').delegate('li', 'click', function() { 
     if (this.id == 'item1') { 
      $Boxee.animate({ 
       backgroundColor: 'blue' 
      }); 
     } 
     if (this.id == 'item2') { 
      $Boxee.animate({ 
       backgroundColor: 'red' 
      }); 
     } 
    }); 

Answer 2

では、各機能を使用している理由を知りません。次のコードは、http://jsfiddle.net/34a5b/10/

で

 var $Nav= $('#Nav'); 
     var $Boxee= $('#BoxeeBox'); 
     $('#Nav li').click(function() { 
      if($(this).attr('id') == 'item1'){ 
       $Boxee.animate({ backgroundColor:'blue' }); 
      } 
      else if($(this).attr('id') == 'item2') { 
       $Boxee.animate({ backgroundColor:'red' }); 
      } 
     }); 

チェックフィドルを行います