jQuery addClass不與ID工作

我有一個非常簡單的addClass()點擊功能，並想知道爲什麼它不起作用。如果我將$('#wicked')更改爲$('div')，則點擊功能正常工作。jQuery addClass不與ID工作

$(document).ready(function() { 
 
    $('#wicked').click(function() { 
 
    $(this).addClass('blueBack'); 
 
    }); 
 
});

#wicked { 
 
    background-color: #ABCDEF; 
 
    font-size: 20px; 
 
    border-radius: 20px; 
 
    border-style: none; 
 
    padding: 25px; 
 
} 
 
.blueBack { 
 
    border-color: #000; 
 
    border-style: solid; 
 
}

<div id="wicked">Test Button</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script type='text/javascript' src='app.js'></script>

來源

2017-01-04 kalhoon

因爲'border-style：none;'由於您的選擇器而具有更高的優先權。見https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – j08691

從技術上講，這個問題與jQuery和JavaScript無關。手動應用你的風格，結果是一樣的。您應該使用瀏覽器的內置開發者工具學習基本的調試技巧，這些工具會向您顯示您正在應用哪些類和規則 – j08691

它的實際工作就好了。 CSS是簡單地覆蓋你的風格。

在css中id的優先級高於class。因此，id的邊框樣式爲none的規則比class中的規則或solid邊框更重要。

來源

2017-01-04 19:15:25

您如何解釋此問題？「如果我將$（'＃wicked'）更改爲$ （'div'），點擊功能工作正常。「 – zgood

@zood它實際上沒有。這在兩種情況下都具有相同的效果。 https://jsfiddle.net/bvxoz4b6/ –

雅我同意你的看法，我認爲你是正確的，我只是想解釋OP所做的陳述 - 也許他只是錯了？ – zgood

jQuery addClass不與ID工作

回答

相關問題