Question

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

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

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

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

点击li时＆gt;找到具体的ID＆gt;做功能对应那个具体的身份

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

    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。如果您说li

，jQuery click将绑定到所有$('#Nav li').click(...)

您的代码不起作用的原因是：$(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/

检查小提琴

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

2 个答案: