需要帮助修复我的jquery代码吗

我不确定我的代码现在出了什么问题。我将jquery设置为where

if（I==0）

，然后单击按钮，按钮背景变为蓝色，变量（I）设置为1。然后我有一个

elseif

语句，表示

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

---

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

尝试：

---

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

尝试：

---

您需要在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.）。单击（）

）

如果该值等于0，则执行某些操作（

if（i==0）

）

---

如果它等于另一个事物（

else if（i==1）

）。

您需要在单击事件中设置条件：

$(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.）。单击（）

）

如果该值等于0，则执行某些操作（

if（i==0）

）

---

else如果它等于另一个东西（

else如果（i==1）

）。

您应该在css中创建这些样式类

您可以使用.hasClass函数代替（i==0）

---

您还应该使用delegate来处理这类事情

您应该在css中创建这些样式类

您可以使用.hasClass函数代替（i==0）

---

您还应该使用delegate来处理这类事情

您可以将

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

---

如果…

或者

在按钮单击中移动该

，或者更好地使用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');
       }
     });
});

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

     });
});

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

     });
});

代码太多了，这个呢

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

与此css配对

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

我做了一把小提琴
那是很多代码，这个呢

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

与此css配对

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

我做了一把小提琴，希望能有帮助

css

jQuery

$(document).ready(function() {
    var btn = $("button");
    btn.on("click",function(){
        $(this).toggleClass("btn-on");
    });
});

希望能有帮助

css

jQuery

$(document).ready(function() {
    var btn = $("button");
    btn.on("click",function(){
        $(this).toggleClass("btn-on");
    });
});

... 如果

…

否则

将其移动到内部按钮单击。。最好使用

class

来操纵颜色。。。。如果…

否则

将其移动到内部按钮单击。。最好使用

class

来操纵颜色。@MatthewR.Miller提问者没有问“我应该做什么”，他们问“我的处理程序为什么不工作？”这就是为什么。@MatthewR.Miller提问者没有问“我应该做什么”，他们问“我的处理程序为什么不工作？”这就是为什么。@MatthewR.Miller即使我也会使用class，OP问为什么他的代码不起作用。这就是为什么而且不值得投反对票的原因，因为它回答了他的问题。@MatthewR.Miller即使我也会使用class，OP也会问为什么他的代码不起作用。这就是为什么而且不值得投反对票的原因，因为它回答了他的问题。如果你要用class，为什么不使用

toggleClass（）

？那会管用的，我试图让他了解jQuery的基本知识，并了解更多。但是最好是这样。如果你使用类，为什么不使用

toggleClass（）

？那会管用的，我试图让他了解jQuery的基本知识，并了解更多。但是最好的方法是使用delegate（）函数，Javascript看起来不错，但是你的CSS有语法错误。@MatthewR.Miller谢谢你纠正了。..btn lightblue{背景色：lightblue；边框：1px solid#5FA9CF；}.btn def{背景色：#E0E0E0；边框：1px solid#CCC；}仍然错误，请参见上文。运行它：CSS已修复，但对于javascript的新jQuery，根据我下面的回答，对于“实时”事件，使用委托要好得多。除了使用delegate（）函数之外，javascript看起来不错，但是CSS有语法错误。@MatthewR.Miller感谢更正。..btn lightblue{背景颜色：lightblue；边框：1px solid#5FA9CF；}.btn def{背景色：#e0；边框：1px实心#CCC；}仍然错误，请参见上面的内容。运行它：CSS已修复，但对于javascript的新jQuery，根据我下面的回答，对于“实时”事件，使用委托要好得多。不要使用委托事件如果元素没有被动态添加，这不是性能方面的。您可以将代码缩减为：

$（'button'）。单击（function（）{$（this）.toggleClass（'class1 class2'）}）

，但是

按钮需要在页面加载时使用
class1
。
.delegate（）。你是对的。。。我在一个目前还无法更新的项目中工作，这很糟糕。@MatthewR.Miller在使用委托之前阅读。在某些情况下，委托是必不可少的，但这并不是我不认为自己被迷住的一个，根据我上面的评论，我说过。on是一个更好的解决方案。代码上有两个注释。不要使用委托事件如果元素没有被动态添加，这不是性能方面的。您可以将代码缩减为：
$（'button'）。单击（function（）{$（this）.toggleClass（'class1 class2'）}）
，但是
按钮需要在页面加载时使用
class1
。
.delegate（）。你是对的。。。我在一个项目中工作很糟糕