2013-06-26 53 views
1

我有你可能會認爲是一個非常簡單的jQuery問題。 (我對此很新穎。)使用jquery的'.on'來定位,添加和刪除類

我有一個菜單,由一堆<h2>組成,我希望每個菜單項在單擊時移動到一側,返回到原始位置時不同菜單項被點擊。我正在用jQuery中的'animate'做這件事。我認爲我可以通過在我的jQuery選擇器中添加一個「.active」類並使用.not('。active')來實現這一點,以便如果用戶反覆點擊菜單項,它將不會繼續在屏幕上移動;然而,它不能正常工作,我認爲這是因爲當我使用$(document).ready時,不會考慮更改班級。所以我試圖用.on來代替,但是我在這個術語中掙扎不已。我想與.not,一起使用它,但是我在這個網站上閱讀過那些無法完成的內容;所以我換了一些東西,並試圖創建一個「。* in * active」類 - 但這對我來說也不適用。

原始$(document).ready代碼:

$(document).ready(function() { 
    $('.menu-item').not('.active').click(function() { 
     $(this).siblings('.active').animate({left: '-=120px'}, '1000'); 
     $(this).siblings('.active').removeClass('active'); 
     $(this).animate({left: '+=120px'}, '1000'); 
     $(this).addClass('active'); 
    }); 
}); 

嘗試在使用.not

$('.menu-item .inactive').on('click', function(event) { 
     $(this).siblings.not('.inactive').animate({left: '-=120px'}, '1000'); 
     $(this).siblings.not('.inactive').addClass('inactive'); 
     $(this).animate({left: '+=120px'}, '1000'); 
     $(this).removeClass('inactive'); 
}); 

上爲什麼.not版本不工作,或者(如果可能的話),我怎麼能得到這個東西任何想法只使用$(document).ready

+0

刪除該帖在動畫時間動畫({左:「 - = 120像素」},1000),並檢查和兄弟姐妹()不是,如果沒有工作給你的HTML。代碼來檢查這個 –

回答

0

它不會工作,因爲$('.menu-item').not('.active')將過濾事件註冊發生時的元素,然後我不認爲任何菜單項都有活動分配給它的類。

的解決方案,您應該是

$(document).on('click', '.menu-item:not(.active)', function(){ 
    //do 
}) 
+0

完美的作品,謝謝! – ethanjrt