Добавить/удалить классы, которые не работают должным образом

Question

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

Вот ссылка Plunker: http://plnkr.co/edit/pgP05rCo5VNGdlq8h8aB?p=preview

Когда кнопка нажата, они должны покраснеть.

Может ли кто-нибудь помочь в этом?

Answer 1

Для достижения этой цели вы можете использовать общий класс на все ваши button элементов:

<div style="text-align: center;"> 
    <p><input type="submit" class="hey" value="Button1" name="btnsubmit" id="answer" style="width: 200px;" /></p> 
    <p><input type="submit" class="hey" value="Button2" name="btnsubmit" id="answer" style="width: 200px;" /></p> 
    <p><input type="submit" class="hey" value="Button3" name="btnsubmit" id="answer" style="width: 200px;" /></p> 
    <p><input type="submit" class="hey" value="Button4" name="btnsubmit" id="answer" style="width: 200px;" /></p> 
</div> 

Оттуда вы можете прикрепить один обработчик событий click для удовлетворения всех этих элементов. Вам просто нужно позвонить removeClass() на всех из них и addClass() на экземпляре, который вызвал событие, как это:

$('.hey').click(function(){ 
    $('.hey').removeClass('red'); 
    $(this).addClass('red'); 
}); 

Updated plunkr

Answer 2

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

// Code goes here 
$(document).ready(function() { 
    $('.hey, .hey2, .hey3, .hey4').click(function(){ 
    $('.hey, .hey2, .hey3, .hey4').removeClass('red'); //Remove all classes red 
    $(this).addClass('red'); // Add it only on one button. 
    }); 
}); 

Demo here.

Answer 3

Я видел две ошибки в коде (script.js):

if(!$('.hey2').hasClass('red')){ 
    $("hey2").removeClass('red'); 
    } 

Прежде всего, вы добавляете "!" в условии if, которого не должно быть. А также вы забыли «.». для класса hey2. Вот коррекция, и это сработало для меня:

if($('.hey2').hasClass('red')){ 
    $(".hey2").removeClass('red'); 
    } 

Это только решение вашей конкретной проблемы. На практике я думаю, что есть лучшие способы приблизиться к вашей проблеме. Посмотрите на другие ответы (от Rory McCrossan и mbinette) за лучшие идеи ;-)