Переключение цвета кнопки при нажатии (и изменение цвета других кнопок)

У меня есть три кнопки, и я хочу изменить цвет кнопки при выборе. Как вы увидите, я могу изменить цвет при выборе, но мне нужно, чтобы кнопка A возвращала свой первоначальный цвет при выборе кнопки B (в этот момент кнопка B должна принять выбранный цвет) и так далее. В настоящее время каждая выбранная кнопка приобретает выбранный цвет, но кнопки не возвращаются к исходному цвету.

См. эту скрипту: http://jsfiddle.net/Fwqv8/

Это сценарий:

jQuery(document).ready(function(){
   jQuery('button.account').click(function() {
      jQuery(this).removeClass("account");
      jQuery(this).addClass("btn-success");
   });
});

В идеале будет кнопка по умолчанию (buttonA), которая имеет выбранный цвет при начальной загрузке страницы.

Помощь будет принята с благодарностью. Спасибо.


javascript click jquery
person Andrew Brown    schedule 08.08.2013    source источник
comment
вам не нужен jQuery(document).ready(поскольку код выполняется по клику   -  person poudigne    schedule 08.08.2013

Ответы (4)


arrow_upward
4
arrow_downward

Вы можете удалить класс btn-success на всех кнопках в функции onclick, а затем добавить класс только к вновь выбранным

jQuery(document).ready(function(){
   jQuery('button.account').click(function() {
      jQuery('button.btn-success').removeClass('btn-success');
      jQuery(this).removeClass("account");
      jQuery(this).addClass("btn-success");
   });
});

Или у вас может быть массив с текущими выбранными кнопками и удаление класса btn-success для недавно нажатой кнопки

http://jsfiddle.net/Fwqv8/3/

person Frank    schedule 08.08.2013

arrow_upward
0
arrow_downward

ВЫ МОЖЕТЕ ИСПОЛЬЗОВАТЬ TOGGLECLASS ДЛЯ ОДНОЙ КНОПКИ

РЕАЛЬНАЯ ДЕМО

person Vaibs_Cool    schedule 08.08.2013

arrow_upward
0
arrow_downward

Вы можете использовать:

jQuery(document).ready(function(){
        jQuery('button.account').click(function(){
            var that = this;
            jQuery('button.account').each(function(i, btn){
                jQuery(this).addClass("btn-danger");
                jQuery(this).removeClass("btn-success");
            });
            jQuery(that).addClass("btn-success");
        });
     });

Этот код возвращает все ваши кнопки в состояние по умолчанию при нажатии. Только нажатая кнопка останется (в вашем случае) «зеленой».

Кнопку по умолчанию можно легко сделать, установив класс по умолчанию в вашей разметке.

person Martin    schedule 08.08.2013
comment
Зачем добавлять класс account к кнопке, у которой уже есть этот класс? И вам не нужен jQuery(document).ready(, так как код выполняется по клику - person poudigne; 08.08.2013
comment
@PLAudet О, понятно. Добавление учетной записи не требуется. Прочитайте вопрос, и этот класс был удален, поэтому я сначала подумал, что добавил класс. И, как уже было сказано, я использовал .ready, потому что в вопросе также была функция .ready. - person Martin; 08.08.2013
comment
Хо не увидел Ready в вопросе: P - person poudigne; 08.08.2013
comment
Большое спасибо за помощь, люди :) - person Andrew Brown; 08.08.2013
comment
если я уберу класс учетной записи из jquery и html, он больше не будет работать. - person Andrew Brown; 08.08.2013
comment
вычистить это. Это работает. И я сбросил готовый документ тоже спасибо. - person Andrew Brown; 08.08.2013

arrow_upward
0
arrow_downward

JS

jQuery(document).ready(function() {

    $('.btn').click(function() {
        $('.btn').removeClass("btnSelected");
        $(this).addClass("btnSelected");
    })

});

CSS

.btn{
  width:100px;
  height:20px;
  display:inline-block;
  background-color:red;
}
.btnSelected{
  background-color:green;
}

HTML

<div id="btn1" class="btn">Button 1</div>
<div id="btn2" class="btn">Button 2</div>
<div id="btn3" class="btn">Button 3</div>

Попробуйте @codebins

person Neel Bhagat    schedule 08.08.2013