Нужна помощь в исправлении моего кода jquery

0

Я не уверен, что не так с моим кодом прямо сейчас. У меня есть набор jquery, где if (i == 0) и вы нажимаете кнопку, тогда фон кнопок становится синим, а затем переменная (i) устанавливается в 1. Тогда у меня есть оператор else if говорящий, что if (i == 1) затем поверните кнопку до серого. Проблема в том, что она не работает. Какие-либо предложения? Заранее спасибо!

Jquery

var i = 0;

$(document).ready(function() {
    if (i == 0) {
        $('button').click(function() {
            $(this).css({
            'background-color' : 'lightblue',
            'border' : '1px solid #5FA9CF'
            });
        });
        i = 1;
    }

    else if (i == 1) {
        $('button').click(function() {
            $(this).css({
            'background-color' : '#E0E0E0',
            'border' : '1px solid #CCC'
            });
        });
        i = 0;
    }
});
  • 0
    ... переместить это, if ... else внутри нажатия кнопки ... еще лучше использовать class для манипулирования цветами.
Теги:

8 ответов

2
Лучший ответ

Вы должны сделать условие внутри события click:

$(document).ready(function() {
    $('button').click(function(){
        if (i == 0) {
            $(this).css({
                'background-color' : 'lightblue',
                'border' : '1px solid #5FA9CF'
            });
            i = 1;
        }

        else if (i == 1) {
            $(this).css({
                'background-color' : '#E0E0E0',
                'border' : '1px solid #CCC'
            });
            i = 0;
        }
    })
});

Когда вы пишете то, что хотите, это ясно.

Когда DOM готов ($(document).ready()),

Вы хотите нажать и кнопку ($('button).click())

и если значение равно 0, то somthing (if(i == 0))

иначе, если он равен другой вещи (else if(i == 1)).

Поделиться
  • 1
    @ MatthewR.Miller, хотя я и буду использовать класс, ОП спросил, почему его код не работает. Это причина, почему и не заслуживает понижения, поскольку он отвечает на его вопрос.
1 
var i = 0;

$(document).ready(function() 
{

        $('button').click(function() 
        {
           if (i === 0)
           {
            $(this).css({
            'background-color' : 'lightblue',
            'border' : '1px solid #5FA9CF'
            });

            i = 1;
           }
          else
          {
            $(this).css({
            'background-color' : '#E0E0E0',
            'border' : '1px solid #CCC'
            });

            i = 0;
          }
        });            
});
Поделиться
  • 0
    @ MatthewR.Miller Вы не ходите с ответом на голосование против людей только потому, что они подходят к стилю иначе, чем вы (встроенные против классов). +1 за решение, которое действительно работает.
  • 0
    Я просто использовал тот же подход, что и ОП, чтобы ОП мог видеть, где его подход был неверным.
1

Проблема в том, что вы привязываете один обработчик при загрузке документа - "переведите эту кнопку в синий цвет". Второй обработчик никогда не запускается.

Пытаться:

$(document).ready(function() {
        $('button').click(function() {
         if (i == 0) {

           $(this).css({
            'background-color' : 'lightblue',
            'border' : '1px solid #5FA9CF'
            });
         i = 1;
         } else {
            $(this).css({
            'background-color' : '#E0E0E0',
            'border' : '1px solid #CCC'
            });
         i = 0;
         }
        });
}
Поделиться
  • 1
    @ MatthewR.Miller Аскер не спросил «что мне делать», они спросили: «Почему мой обработчик не работает?» Вот почему.
1

Вы можете переместить это, if... else внутри кнопки нажмите, или даже лучше использовать css для управления стилями, как показано ниже.

CSS:

.btn-lightblue { 
    background-color : lightblue; 
    border : 1px solid #5FA9CF; 
}

.btn-def { 
     background-color : #E0E0E0; 
     border : 1px solid #CCC; 
}

Javascript

$(document).ready(function() {
    $('button').click(function() {        
       if ($(this).hasClass('btn-def') {
          $(this).addClass('btn-lightblue').removeClass('btn-def');            
       } else {
           $(this).addClass('btn-def').removeClass('btn-lightblue');
       }
     });
});
Поделиться
  • 0
    Хотите оставить комментарий, почему downvote?
  • 0
    Javascript выглядит хорошо, за исключением использования делегата (), однако ваш CSS имеет синтаксические ошибки.
Показать ещё 8 комментариев
0

Надеюсь, это поможет Fiddle здесь

CSS

.btn-on {
    background-color: lightblue;
    border : 1px solid #5FA9CF;
}
.btn-off {
    background-color: #E0E0E0;
    border : 1px solid #CCC;
}

JQuery

$(document).ready(function() {
    var btn = $("button");
    btn.on("click",function(){
        $(this).toggleClass("btn-on");
    });
});
Поделиться
0

Это много кода, как насчет этого?

$('button').click(function() {
    $(this).toggleClass('on');
});

в паре с этим css

button{background-color:#E0E0E0;border: 1px solid #CCCCCC}
button.on{background-color:#5FA9CF;border:1px solid #5FA9CF}

Я сделал скрипку http://jsfiddle.net/filever10/y9KML/

Поделиться
  • 0
    Да, общая проблема может быть оптимизирована. Я более или менее решал его проблему так, как он ее решал, но заставлял ее работать.
  • 1
    рефакторинг это не выбор. Я просто хотел, чтобы это было просто.
0

Ваш CSS:

.class1 {
     background-color: lightblue;
     border: 1px solid #5FA9CF;
}

.class2 {
     background-color: #E0E0E0;
     border: 1px solid #CCC;
}

Ваш Javascript

$(document).ready(function() {

     $('body').delegate('button', 'click', function() {

          if ($(this).hasClass('class1')) {
               $(this).toggleClass('class1', 'class2');
          }
          else {
               $(this).toggleClass('class2', 'class1');
          }

     });
});
Поделиться
  • 1
    2 примечания к вашему коду. Не используйте делегированное событие, если элементы не добавляются динамически, это не влияет на производительность. Ваш код может быть уменьшен до: $('button').click(function(){$(this).toggleClass('class1 class2')}) но button требует class1 при загрузке страницы.
  • 1
    .delegate() был заменен (и улучшен) на .on() . api.jquery.com/delegate
Показать ещё 4 комментария
0

Вы должны сделать эти классы стилей в своем css.

Вы можете использовать функцию.hasClass http://api.jquery.com/hasClass/ вместо (i == 0)

Вы также должны использовать делегат для такого рода вещей http://api.jquery.com/delegate/

Поделиться
  • 0
    Если вы собираетесь с классом, почему бы не использовать toggleClass() ?
  • 0
    Это сработает, я пытался познакомить его с основами jQuery и узнать немного больше об этом. Но это было бы лучше всего.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню