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工作

回答

相关问题