jQuery點擊功能在Chrome上不起作用

Question

我想在我的網站上放置菜單的樣式切換器，但它不適用於Chrome/IE/Safari（適用於FireFox）。下面是一些代碼：

// Menu Style Switcher 
    $("#option-1").click(function(){ 
     $("#navigation").removeClass("style-2"); 
    }); 

    $("#option-2").click(function(){ 
     $("#navigation").addClass("style-2"); 
    }); 


<div class="menu-style"> 
    <select> 
     <option id="option-1">Style 1</option> 
     <option id="option-2">Style 2</option> 
    </select> 
</div> 

Answer 1

你應該聽的change事件整個<select>元素。

標記：

<select id="yourSelect"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 

JS：

$('#yourSelect').change(function(e){ 

    if($(this).val() == 1){ 

     $("#navigation").removeClass("style-2");   

    }else{ 

     $("#navigation").addClass("style-2");   

    } 
} 

See fiddle。

Answer 2

addClassName不存在。該函數的正確名稱是addClass

---

另一個改進是使用change事件select元素，而不是click上的選項的..

// Menu Style Switcher 
$('.menu-style select').change(function(){ 
    if (this.value === 'Style 1'){ 
     $("#navigation").removeClass("style-2"); 
    } else { 
     $("#navigation").addClass("style-2"); 
    } 
});