Переключить класс кнопки Twitter Bootstrap, когда активен

В загрузчике Twitter я искал способ, позволяющий кнопке быть цветом по умолчанию, когда он не активен. Как только кнопка активна, я хотел изменить ее цвет. Я посмотрел на способы сделать это с помощью файла JS, который был предоставлен. В итоге я написал небольшой сценарий, чтобы справиться с этим.

Ответы на вопрос(3)

Я отредактировал ваш код. Если вы щелкнете по активному состоянию в вашем коде, все будет плохо. Я добавил небольшое заявление if, которое предотвращает это. Просто вклад, если вам нужно исправить. Хорошая работа с кодом.

$('.btn-group > .btn, .btn[data-toggle="button"]').click(function() {
var buttonClasses = ['btn-primary','btn-danger','btn-warning','btn-success','btn-info','btn-inverse'];
var $this = $(this);

    if ($(this).attr('class-toggle') != undefined && !$(this).hasClass('disabled')) {

        var btnGroup = $this.parent('.btn-group');
        var btnToggleClass = $this.attr('class-toggle');
        var btnCurrentClass = $this.hasAnyClass(buttonClasses);

        if(btnToggleClass!='false'&&btnToggleClass!='btn') {

            if (btnGroup.attr('data-toggle') == 'buttons-radio') {
                var activeButton = btnGroup.find('.btn.active');
                var activeBtnClass = activeButton.hasAnyClass(buttonClasses);

                    activeButton.removeClass(activeBtnClass).addClass(activeButton.attr('class-toggle')).attr('class-toggle',activeBtnClass);               
                    $this.removeClass(btnCurrentClass).addClass(btnToggleClass).attr('class-toggle',btnCurrentClass);

            }

            if (btnGroup.attr('data-toggle') == 'buttons-checkbox' || $this.attr('data-toggle') == 'button') {
                $this.removeClass(btnCurrentClass).addClass(btnToggleClass).attr('class-toggle',btnCurrentClass);
            }

        }


    }



});    

$.fn.hasAnyClass = function(classesToCheck) {
    for (var i = 0; i < classesToCheck.length; i++) {
        if (this.hasClass(classesToCheck[i])) {
            return classesToCheck[i];
        }
    }
    return false;

Искренне другой любитель начальной загрузки

Решение Вопроса

Добавляяclass-toggle в качестве атрибута кнопки, равной тому, что вы хотели бы перейти после нажатия кнопки и добавления следующего jQuery, вы получите результат, описанный выше.

$('.btn-group > .btn, .btn[data-toggle="button"]').click(function() {

        if($(this).attr('class-toggle') != undefined && !$(this).hasClass('disabled')){
            var btnGroup = $(this).parent('.btn-group');

            if(btnGroup.attr('data-toggle') == 'buttons-radio') {
                btnGroup.find('.btn').each(function() {
                    $(this).removeClass($(this).attr('class-toggle'));
                });
                $(this).addClass($(this).attr('class-toggle'));
            }

            if(btnGroup.attr('data-toggle') == 'buttons-checkbox' || $(this).attr('data-toggle') == 'button') {
                if($(this).hasClass('active')) {
                    $(this).removeClass($(this).attr('class-toggle'));
                } else {
                    $(this).addClass($(this).attr('class-toggle'));
                }
             }

          }


      });

Тогда кнопка будет выглядеть

<button class="btn" data-toggle="button" class-toggle="btn-inverse">Single Toggle</button>

Если вы хотите сделать это с группой кнопок, то это будет работать так же. Просто добавьтеclass-toggle каждой кнопке в группе.

JSFIDDLE

UPDATE

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

UPDATE

Я внес изменения, чтобы исправить ошибку, которая появляется при нажатии активной кнопки

Найдите это здесь

 bretterer20 июн. 2013 г., 21:54
Я не уверен, что понимаю, что вы говорите @mffap
 bretterer20 мая 2013 г., 14:58
@BabyAzerty Я обновил его, чтобы исправить это. смотрите последнее обновление илиjsfiddle.net/W9hUr/120
 20 июн. 2013 г., 11:20
Привет, спасибо за этот пост. Однако это не работает, когда вы назначаете для кнопки второе нажатие (далее в скрипте). Есть ли более эффективный способ справиться с этим делом, или мне нужно вызывать функцию каждый раз, когда я хочу, чтобы классы переключались в группу кнопок / кнопку?
 bretterer08 июл. 2013 г., 20:02
@mffap взгляните наjsfiddle.net/W9hUr/151 и нажмите на кнопку да. Вы увидите, что у меня есть обработчик нажатия на эту кнопку, чтобы добавить сообщение. Я думаю, это то, что вы говорили
 18 мая 2013 г., 01:57
Спасибо за суть! Однако в случае переключателей, когда вы дважды нажимаете на одну и ту же кнопку, появляется сбой.

Я не думаю, что любой JS действительно необходим. Я считаю, что это может быть сделаноpurely by CSS and data attributes.

Да, это включает в себя немногоCSS duplication, но все же лучше, чем иногда глючный javascript.

Add data attribute data-active-class to button,

Add custom CSS for all classes (example of one for readability; colors are taken from already existing classes "primary", "success", and so on)

.btn.active[data-active-class="primary"] {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}

Inactive button будет отображаться как обычно,active основанный наdata-* Атрибут будет отображаться этим ^^ CSS.

JSFiddle с полным CSS

Edit: При использовании SASS или LESS цвета могут / должны использоваться из переменных, уже определенных Bootstrap ..., который решаетduplicating проблема.

 19 июл. 2015 г., 10:32
@Khrys Пробовал это на нескольких ПК (даже на моем телефоне), без проблем, не могли бы вы предоставить больше информации о том, что не так? Есть только некоторые html и css, нет javascript, может быть, что-то не так с внешними ресурсами (отсутствуют bootstrap.min.js и bootstrap.min.css)?
 23 апр. 2015 г., 23:02
@bretterer Пожалуйста, подумайте, удовлетворяет ли этот ответ вашим потребностям :)
 07 янв. 2016 г., 04:00
это хорошее решение для меня, JS не требуется.
 02 апр. 2018 г., 08:10
Я голосую вверх! Это предотвратит ошибки при работе с асинхронным поведением ...
 17 июл. 2015 г., 04:05
Я что-то пропустил? Не удалось заставить это работать в предоставленной скрипке.

Ваш ответ на вопрос