-1

我是 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_ 也不重要，但我需要在这里显示所有代码。

4

4 回答 4

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

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

由于您是 jQuery 新手，我将解释发生了什么。在您的原始代码中，您选择所有具有类的节点.button并将点击事件绑定到所有节点。当其中任何一个被单击时，您将再次重新选择所有节点并将 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/

于 2013-03-12T17:20:50.800 回答
0

尝试使用$(this)

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

在您的情况下，您的目标是所有按钮的集合名为$('.button'). 您需要将事件捕获到获得事件的当前对象。

于 2013-03-12T17:21:15.463 回答
0

您需要使用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/

于 2013-03-12T17:24:28.857 回答
0 
jQuery('.button').live('click', function() {
    jQuery(this).css('background-color', 'red');
})
于 2013-03-12T17:51:16.550 回答