Question

我在css中设置了div的背景颜色。当我点击div时，我想通过添加另一个css选择器来改变它的背景颜色。无论我如何在我的css文件中排列选择器，背景颜色都不会变为红色。无论如何，我可以在使用select COUNT(*) as NumToDelete from MyTable where DateInserted < DATEADD(DAY, -30, getdate()) DELETE from MyTable where DateInserted < DATEADD(DAY, -30, getdate())？

时设置特异性

点击div会将背景更改为红色，如果我不给div .addClass类。

default_color

Answer 1

不确定您使用toElement的原因，将其更改为this或e.target

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

或

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

当特异性相同时，CSS顺序将很重要。

Answer 2

在事件监听器内部，你应该用$（this）引用被点击的元素，而你不需要使用on，你可以使用click。改变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覆盖了它上面的规则。尝试切换它们。

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

.selected_color {
  background-color:#F00;
}

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');}
    }

.addClass与JQuery的特异性？

6 个答案: