jQuery - 导航 - 如果找到特定的 id，则执行某些操作。

Question

我似乎无法理解我在这里做错了什么。

在某种程度上，我的代码确实有效，但它不是找到被单击元素的 id，而是找到所有 id

http://jsfiddle.net/34a5b/ - 我将其设置为动画，以便您可以看到它找到了 #item1 然后#item2

我正在寻找的基本功能如下：

当点击 li 时 >查找特定 ID >做功能 对应那个特定的id

关于为什么这不起作用的任何想法？

    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' });
        }
    });
});

现在我想知道为什么我把 $nav.each...

---

我也试图找出更动态/更简单的方法来做类似的事情，但我无法弄清楚...惊喜惊喜...如果有人的话我会很感激也可以为我指出那个方向（尽管我仍然想知道为什么我的代码不起作用）

Answer 1

您不必循环遍历 $Nav。如果您说 $('#Nav li').click(...) ，jQuery click 将绑定到所有 li

您的代码不起作用的原因是：$(this).find('#item1') - 这里 $(this) 表示 li，所以你正在努力寻找 #item1 本身。

已修复： 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

不知道你为什么使用每个功能。以下代码将

       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' });
           }
       });

在 http://jsfiddle.net/34a5b/10/ 处检查 Fiddle