0

我不确定我的代码现在有什么问题。我将 jquery 设置为 where if (i == 0)，然后单击按钮，然后按钮背景变为蓝色，然后变量 (i) 设置为 1。然后我有一个else if声明说，if (i == 1)然后将按钮变回灰色。问题是它不起作用。有什么建议么？提前致谢！

查询

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

8 回答 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 做某事 ( if(i == 0))

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

于 2013-10-22T17:10:05.207 回答
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;
         }
        });
}
于 2013-10-22T17:09:57.777 回答
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');
       }
     });
});
于 2013-10-22T17:13:41.327 回答
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;
          }
        });            
});
于 2013-10-22T17:14:42.503 回答
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/

于 2013-10-22T17:28:30.030 回答
0

希望它在这里帮助小提琴

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");
    });
});
于 2013-10-22T17:30:14.510 回答
0

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

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

您还应该将委托用于此类事情http://api.jquery.com/delegate/

于 2013-10-22T17:10:38.193 回答
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');
          }

     });
});
于 2013-10-22T17:14:46.683 回答