需要帮助修复我的jquery代码

时间:2013-10-22 17:08:04

标签: jquery

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

JQUERY

if (i == 1)

8 个答案:

答案 0 :(得分: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,请执行某事(if(i == 0)

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

答案 1 :(得分: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;
         }
        });
}

答案 2 :(得分: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');
       }
     });
});

答案 3 :(得分: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;
          }
        });            
});

答案 4 :(得分:0)

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

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

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

答案 5 :(得分: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');
          }

     });
});

答案 6 :(得分: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/

答案 7 :(得分:0)

希望它有助于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");
    });
});