Question

我有this。

$(function()
 {
    $("#test_div").toggle(
        function() { $("#test_div").css({"background-color": "#00ff00"}); },
        function() { $("#test_div").css({"background-color": "#0000ff"}); }
    );
});

根据documentation，每次单击div时，切换中的函数都应以其他方式执行。首先应该执行第一个参数中的函数，然后在第二个参数之后执行第二个参数中的函数。

然而，div只是隐藏。我做错了什么？

Answer 1

如果您使用的是jQuery 1.9.0或更高版本，则会删除切换事件。尝试使用toggleClass（）。

Answer 2

使用toggleClass()。用你想要的背景创建一个类并切换它..简单易读.. :)

试试这个

<强> JQUERY

 $("#test_div").click(function(){
     $(this).toggleClass("newClass");
 });

<强> CSS

 #test_div
 {
   background-color: #ff0000;
   width: 100px;
   height: 100px;
 }
 #test_div.newClass
 {
   background-color: #0000ff;
 }

fiddle here

Answer 3

jQuery 1.9中删除了.toggle的此功能，并且有充分的理由。维护要在内部切换的项目的状态非常简单，可能是这样的：

$("#test_div").on('click', function () {
    var $this = $(this);
    if ($this.css('background-color') == '#00ff00') {
        $this.css('background-color', '#0000ff');
    }
    else {
        $this.css('background-color', '#00ff00');
    }
});

如果这不好，你可以使用像{toggleState一样的.data参数，这可能是一个更好的主意，因为你无法依赖.css的准确读数。

Answer 4

尝试像这样使用

$(function()
 {
    $("#test_div").click(
function() { 
            if ($("#test_div").css("background-color") == "rgb(0, 255, 0)")
                $("#test_div").css({"background-color": "#0000ff"});
            else
                $("#test_div").css({"background-color": "#00ff00"});
            }
    );
});

See Demo

当它应该交替处理程序时，JQuery切换功能会隐藏

4 个答案: