jQuery - Навигация - Если конкретный идентификатор найден, сделайте что-нибудь. - PullRequest
Новая
       7

jQuery - Навигация - Если конкретный идентификатор найден, сделайте что-нибудь.

1 голос
/ 31 июля 2011

Кажется, я не понимаю, что я делаю здесь неправильно.

В некотором смысле мой код работает, но вместо поиска id элемента, по которому щелкнули, он находит все id s

http://jsfiddle.net/34a5b/ - я положил его для анимации, чтобы вы могли видеть, что он находит #item1, а затем #item2

Базовая функциональность, которую я ищу, выглядит следующим образом:

При нажатии li> найти конкретный идентификатор> выполнить функцию соответствующий этому конкретному идентификатору

Есть идеи, почему это не работает? 

    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 ....

Я также пытался найти более динамичный / более простой способ сделать что-то подобное, но я не мог понять это ... неожиданный сюрприз ... Я был бы признателен, если бы кто-то мог указать мне направление с этим также (хотя я все еще хотел бы знать, почему мой код не работает)

Ответы [ 2 ]

2 голосов
/ 31 июля 2011

Вы не должны проходить через $Nav. jQuery click будет привязан ко всем li, если вы скажете $('#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'
            });
        }
    });
0 голосов
/ 31 июля 2011

Не знаю, почему вы используете каждую функцию. Следующий код будет делать 

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

проверьте Fiddle на http://jsfiddle.net/34a5b/10/

...