jQuery自定義菜單 - 添加和刪除類onClick

如果有人可以爲這個問題想一個更好的標題，請隨時修改它。這是問題：在導航菜單中，單擊一個項目應將其標記爲紅色（默認爲橙色）。使用CSS按鈕生成器應用程序生成橙色和紅色樣式（類別名稱分別爲bmark和bmark_active）。這是jQuery的代碼應該做的工作：jQuery自定義菜單 - 添加和刪除類onClick

$(function() { 
    $('.bmark').click(function(){ 
     $('.bmark_active').addClass('bmark'); 
     $('.bmark_active').removeClass('bmark_active'); 
     $(this).addClass('bmark_active'); 
     $(this).removeClass('bmark'); 
    }); 
})

它工作正常的所有按鈕，除了（在撥弄例如「所有」）默認的。例如，如果您點擊「俄羅斯」，紅色焦點將移動到該按鈕上（通過刪除橙色課程並添加紅色課程），但是當再次單擊「全部」時，它不會切換爲紅色。爲什麼是這樣，我該如何解決它？

JS Fiddle

來源

2013-06-01 jovan

你不是運用click()事件的父元素，只把它應用到子元素：

$(function() { 
    $('.bmark, .bmark_active').click(function(){ 
     $('.bmark_active').toggleClass('bmark').removeClass('bmark_active'); 
     $(this).addClass('bmark_active').removeClass('bmark'); 
    }); 
})

jsFiddle here.

來源

2013-06-01 15:12:57 lifetimes

謝謝你，固定它。 – jovan

你沒有約束力'.bmark_active'元素。

你可以這樣做：

$(function() { 
    $(document).on('click', '.bmark_active,.bmark', function() { 
     $('.bmark_active').addClass('bmark').removeClass('bmark_active'); 
     $(this).removeClass('bmark').addClass('bmark_active'); 
    }); 
})

Demonstration

但多數情況下我更願意給同一個類的所有元素，並僅在有源元件添加或刪除類，從而使事件處理代碼將

$('.bmark').removeClass('active'); 
$(this).addClass('active');

它也讓CSS更乾淨爲你的兩個類，就目前來看，大多是相同的，並且最好是剛纔的「積極」班中孤立的兩種模式之間幾乎沒有變化。

來源

2013-06-01 15:14:03

更新你的小提琴這樣做。更簡化。其他答案在這裏工作正常，但這是處理它的最簡單的方式。

$(function() { 

    $('.bmark').click(function(){ 
     $('.bmark').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
})

http://jsfiddle.net/chazelton/52esG/2/

來源

2013-06-01 15:14:57 origin1tech

jQuery自定義菜單 - 添加和刪除類onClick

回答

相關問題