. AddClass специфичность с JQuery?

Question

Я установил цвет фона div в css. Когда я нажимаю на div, я хочу изменить его цвет фона, добавив еще один селектор css. Независимо от того, как я упорядочиваю селектора в моем файле css, цвет фона не изменится на красный. В любом случае я могу установить специфичность при использовании .addClass?

Нажатие на div меняет фон на красный, если я не даю div классу default_color.

$('.js-div').on('click', function (e) { 
    $(e.toElement).addClass('selected_color'); 
} 

.selected_color { 
background-color:#F00; 
} 

.default_color { 
background-color:#0F0; 
} 

Answer 1

Не знаете, почему вы используете toElement, смените его на this или e.target

$(this).addClass('selected_color'); 

или

$(e.target).addClass('selected_color'); 

И CSS порядок будет иметь значение, когда специфика такая же.

Answer 2

Внутри слушателя событий вы должны ссылаться на щелкнул элемент с $ (это), и вам не нужно использовать, вы можете использовать кнопку. Важно, чтобы изменить порядок классов в ypur CSS, поэтому selected_color переопределение default_color

.default_color { 
background-color:#0F0; 
} 

.selected_color { 
background-color:#F00; 
} 

$('.js-div').click(function() { 
    $(this).addClass('selected_color'); 
} 

Если вы хотите, чтобы переключить цвет с щелчком мыши вы можете использовать

$('.js-div').click(function() { 
    $(this).toggleClass('selected_color'); 
} 

Рабочий пример с переключателем http://codepen.io/anon/pen/qdPezK

Answer 3

Вы можете просто переключать класс следующим образом:

$('.js-div').on('click', function() { 
    $(this).toggleClass('colorify'); 
}); 

CSS:

.js-div { 
    background: #0f0; 
} 

.js-div.colorify { 
    background: #f00; 
} 

Это общая закономерность наличия элемента по умолчанию имеют определенный цвет или любой другой, а затем просто переключать класс, который меняет его (вместо двух отдельных классов).

Если вам нужны два разных класса по любой причине, вы можете переключить второй класс или просто позвонить removeClass для первого и addClass для второго, но это больше для отслеживания.

Answer 4

В вашем примере .selected_color находится поверх .default_color. Поскольку стили каскада, я предполагаю, что .default_color переопределяет правило над ним. Попробуйте переключить их.

Answer 5

Читайте, как работает CSS ... Если вы ставите одно определение ниже другого, то второе будет перезаписывать первое. В вашем случае должно быть достаточно для переключения позиций между .selected_color и .default_color.

Тогда есть случай, когда более точный селектор в CSS переопределяет более широкий селектор. Таким образом, a будет отменен a.class_name, а a.class_name будет отменен p > a.class_name.

This article explains it a bit better.

Answer 6

Использование CSS это JQuery выполнит нужный эффект на мыши и вернуться в исходное состояние, если нажмите еще раз. Если вы не хотите, возможности для того, чтобы вернуться назад просто оставить вне else if заявления:

$('.js-div').click(function(){ 
     if ($('.js-div').hasClass('default_color')){$('.js-div').removeClass('default_color').addClass('selected_color');} 
     else if ($('.js-div').hasClass('selected_color')){$('.js-div').removeClass('selected_color').addClass('default_color');} 
    }