Question

我是jQuery的新手，当我点击更改按钮的颜色而不更改所有类时我需要。我怎么能这样做。

<div class="button">First button</div>
<div class="button">Second button</div>
<div class="button">3 button</div>
<div class="button">4 button</div>

$('.button').on('click', function() {
    $('.button').css('background-color', '#C00');
})

.button {
    background-color: #9C0;
    height: 50px;
    width: 100px;
    margin-top:5px;
}

http://jsfiddle.net/nJ895/

因此，当我点击第一个按钮时，我需要仅在点击的按钮上更改颜色，而不是在所有按钮上，所以有什么方法可以做到这一点吗？

更新：

抱歉，我尝试了您的解决方案，但我的代码更复杂，不适用于此： http://jsfiddle.net/nJ895/7/

这里我需要解决一些问题所以当我点击“1按钮”时，这个按钮必须改变颜色但是如果我点击“2按钮”然后“1按钮必须丢失颜色”和“2按钮获得颜色“......这不会影响其他div中的第二个”1按钮“和”2按钮“，它必须以相同的方式工作......请帮助。在这种情况下#id_也不重要，但我需要它来显示所有代码。

Answer 1

$('.button').on('click', function() {
    $(this).css('background-color', '#C00');
});

更新了演示：http://jsfiddle.net/nJ895/1/

由于你是jQuery的新手，我将解释发生了什么。在原始代码中，您将选择类.button的所有节点，并将click事件绑定到所有节点。当他们中的任何一个被点击时，您将再次重新选择所有节点并将CSS 应用于所有节点。 $(this)对象将指向刚刚发生的事件绑定的节点，并仅将CSS应用于该适当的节点。

我建议考虑添加一个新类而不是应用文字CSS。它可以让您的样式不受JavaScript代码的影响。

CSS ：

.button {
    background-color : #9C0;
    height           : 50px;
    width            : 100px;
    margin-top       : 5px;
}
.button.active {
    background-color: #C00;
}

jQuery ：

$('.button').on('click', function() {
    $(this).toggleClass('active');
});

演示：http://jsfiddle.net/nJ895/3/

或者，如果您只想一次选择一个按钮：

$('.button').on('click', function() {
    $(this).addClass('active').siblings().removeClass('active');
});

演示：http://jsfiddle.net/nJ895/5/

Answer 2

尝试使用$(this)

$(this).css('background-color', '#C00');

在您的情况下，您使用名为$('.button')的集合定位所有按钮。您需要将事件捕获到获取事件的当前对象。

Answer 3

您需要使用this来定位点击的元素

$('.button').on('click', function() {
    $(this).css('background-color', '#C00');
})

但更改颜色的更正确的方法是使用额外的类

<强> CSS

.button {
    background-color: #9C0;
    height: 50px;
    width: 100px;
    margin-top:5px;
}
.button.active{
    background-color: #c00;
}

<强>的jQuery

$('.button').on('click', function() {
    $(this).addClass('active');
});

http://jsfiddle.net/nJ895/2/

演示

Answer 4

jQuery('.button').live('click', function() {
    jQuery(this).css('background-color', 'red');
})

更改按钮的颜色而不更改类

4 个答案: