Изменение цвета кнопки без изменения класса

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/

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

UPDATE:

жаль, что я попытать решение, но мой код является более сложным и не работают с этим: http://jsfiddle.net/nJ895/7/

Здесь мне нужно решить некоторые проблемы, поэтому, когда я нажимаю на «1 кнопку» это кнопка должна изменить цвет, но если я нажму на кнопку «2», тогда «1 кнопка должна потерять цвет» и «2 получить цвет» ... это не будет совершенным, вторая «1 кнопка» и «2 кнопки» в другой div, который должен работать таким же образом ... пожалуйста, ПОМОГИТЕ. также #id_ не важно в этом случае, но мне нужно здесь, чтобы показать весь код.

Answer 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/

Answer 2

попробовать с помощью $(this)

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

В вашем случае вы целились все кнопки с коллекцией под названием $('.button'). Вам нужно зафиксировать событие для текущего объекта, который получил событие.

Answer 3

Вы должны использовать this для нацеливания Clicked элемент

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