JQuery обрабатывает событие, но не выполняет функцию

Question

У меня есть div с классом = "доказательство", который содержит 4 элемента (кнопки), которыми я бы хотел управлять через jQuery. Я должен изменить цвет фона кнопки щелкнул, и сбросить другие 3 кнопки фона, чтобы имитировать кнопку переключения между

Я написал это:

$('.evidence [id^=button]').on('click', function() { 
    $('.evidence [id^=button]').not($(this)).css('backgroud-color', '#88e885'); 
    $(this).css('backgroud-color', '#559153'); 
}); 

Идентификаторы кнопка запуска с помощью кнопки, а кнопки дети из div-класса = "доказательства". Я могу отлаживать с firebug, и я могу увидеть точку останова на $ ('. Evidence [id^= button]'), но функция не выполняется.

Вы можете мне помочь?

EDITED

Это мой HTML

<div class="evidence"> 
    <table> 
     <tr> 
      <td><asp:Button runat="server" CssClass="btn" ID="button1"/></td> 
      <td><asp:Button runat="server" CssClass="btn" ID="button2"/></td> 
      <td><asp:Button runat="server" CssClass="btn" ID="button3/></td> 
      <td><asp:Button runat="server" CssClass="btn" ID="button4"/></td> 
     </tr> 
    </table> 
</div> 

Answer 1

Попробуйте это - http://jsfiddle.net/A9jzR/

$('div.evidence button').on('click', function() { 
    $('div.evidence button').css('background', '#88e885'); 
    $(this).css('background', '#559153'); 
}); 

Нет необходимости применять .not(). Вы можете покрасить все кнопки в измененный цвет, а затем просто придать желаемый вид вашему клику.

Answer 2

Вам необходимо отфильтровать селектор на что-то после подтверждения.

$('.evidence div[id^=button]')

Answer 3

Я понимаю, что у вас есть некоторые HTML, как:

<div class="evidence"> 
    <button id="button-n1">1<button> 
    <button id="button-n2">2<button> 
    <button id="button-n3">3<button> 
    <button id="button-n4">4<button> 
</div> 

У вас есть опечатка в background-color, Вы писали backgroud-color вместо этого, это потому, что ваш код не работает.

Предлагаю использовать метод .siblings() для того, что вы хотите сделать.

$('.evidence [id^=button]').on('click', function() { 
    $(this) 
    .css('background-color', '#559153') 
    .siblings("[id^=button]").css('background-color', '#88e885'); 
}); 

Here is a working jsfiddle.

Answer 4

Я лично рекомендую предварительно выбрать кнопки, выходящие за рамки события click, с легкой точки зрения. Предполагается, что кнопки не могут быть изменены.

У меня есть DIV с классом = "доказательства", который содержит 4 элемента (кнопка)

Имея это в виду, я использовал следующий селектор:

var buttons = $('.evidence input[type="button"]'); 
$(buttons).click(function() 
{ 
    $(buttons).css('background', '#88e885').not(this).css('background', '#559153'); 
}); 

Этот также означает, что вы можете и легко изменить селектор в одном месте без необходимости в дополнительных ненужных изменениях.

Вы можете сделать шаг дальше, сделать плагин jQuery ...

(function ($) 
{ 
    $.fn.buttonToggler = function (inactiveColour, activeColour) 
    { 
     var buttons = this; 
     return buttons.click(function() 
     { 
      buttons.css('background', inactiveColour).not(this).css('background', activeColour); 
     }); 
    } 
})(jQuery); 

$('.evidence input[type="button"]').buttonToggler('#88e885', '#559153'); 
​ 

Answer 5

Я предполагаю, что ваш HTML будет выглядеть примерно так:

<div class="evidence"> 
    <input type="button" value="1" /> 
    <input type="button" value="2" /> 
    <input type="button" value="3" /> 
    <input type="button" value="4" /> 
</div> 

Это JQuery работает для вышеприведенного разметки:

$(".evidence input[type=button]").click(function(){ 
    $(".evidence input[type=button]").css('background-color', '#559153'), 
    $(this).css('background-color', '#88e885'); 
}); 

Это принимает более простой подход, чем ваш комплект поставки образца кода; когда нажата кнопка, он сбрасывает все цвета фона на кнопках, а затем устанавливает цвет кнопки с нажатой кнопкой.

Answer 6

Вы можете делегировать мероприятие вместо этого, имеет больше смысла. Кроме того, если все кнопки братья и сестры, используйте функцию .siblings(), чтобы получить другие кнопки:

$('.evidence').on('click', '[id^=button]', function() { 
    $(this).css('background-color', '#559153') 
     .siblings().css('background-color', '#88e885'); 
}); 

Если они не являются братьями и сестрами, что-то вроде:

$('.evidence').on('click', '[id^=button]', function() { 
    $(this).css('background-color', '#559153') 
     .closest('.evidence').find('[id^=button]') 
     .css('background-color', '#88e885'); 
});