javascript - JQuery 切换功能在应该替换处理程序时隐藏

Question

我有这个。

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

根据文档，每次我在 div 中单击时，切换中的功能都应该以另一种方式执行。首先第一个参数中的函数应该执行，第二次单击后第二个参数中的函数应该执行。

但是，div 只是隐藏起来。我究竟做错了什么？

Answer 1

如果您使用的是 jQuery 1.9.0 或更高版本，他们删除了切换事件。尝试使用 toggleClass()。

Answer 2

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

试试这个

查询

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

CSS

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

在这里摆弄

Answer 3

这个功能.toggle在 jQuery 1.9 中被移除了，这是有充分理由的。维护要在内部切换的项目的状态相当简单，可能像这样：

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

如果这样做不好，您可以只使用.data“toggleState”之类的参数，这可能是一个更好的主意，因为您不能依赖.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"});
            }
    );
});

看演示