Question

我现在不确定我的代码有什么问题。我将jquery设置为if (i == 0)，然后单击按钮，然后按钮背景变为蓝色，然后变量（i）设置为1.然后我有else if语句说{{1}然后将按钮变回灰色。问题是它无法正常工作。有什么建议？提前谢谢！

JQUERY

if (i == 1)

Answer 1

您需要在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，请执行某事（if(i == 0)）

否则，如果它等于另一件事（else if(i == 1)）。

Answer 2

问题是你在文档加载时绑定了一个处理程序 - “将此按钮变为蓝色”。第二个处理程序永远不会运行。

尝试：

$(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;
         }
        });
}

Answer 3

您可以在按钮点击内移动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');
       }
     });
});

Answer 4

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;
          }
        });            
});

Answer 5

你应该在你的CSS中创建那些样式类。

您可以使用.hasClass http://api.jquery.com/hasClass/函数代替（i == 0）

您还应该使用委托来处理此类事件http://api.jquery.com/delegate/

Answer 6

你的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');
          }

     });
});

Answer 7

这是很多代码，这个怎么样？

$('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/

Answer 8

希望它有助于Fiddle here

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");
    });
});

需要帮助修复我的jquery代码

8 个答案: