2017-01-04 7 views
1

У меня очень простой 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>

+1

Потому что 'border-style: none;' имеет более высокую точность из-за вашего селектора. См. Https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – j08691

+0

Технически этот вопрос не имеет ничего общего с jQuery и JavaScript. Примените свой стиль вручную, и результат будет таким же. Вы должны изучить основные методы отладки с помощью встроенных инструментов разработчика, которые бы показали, какие из ваших классов и правил применяются – j08691

ответ

5

Это на самом деле работает просто отлично. Css просто переписывает ваш стиль.

В css id имеет более высокий приоритет, чем class. Поэтому правило для id иметь стиль границы none является просто более важным, чем ваше правило, или solid границей в class.

+0

Как вы это объясните ?: «Если я изменил $ ('# wicked') на $ ('div'), функция щелчка работает отлично. « – zgood

+1

@zgood на самом деле этого не делает. Это имеет тот же эффект в обоих случаях. https://jsfiddle.net/bvxoz4b6/ –

+0

ya Я согласен с вами, и я думаю, что вы правы, я просто пытался объяснить это утверждение, которое сделал OP - может быть, он просто ошибся? – zgood