Question

$("document").ready(function(){
    $("button.art").click(function() {
        $(".patr").fadeIn("slow");
        $("button.art").text("Hide them all").promise().done(function(){

        $("button.art").click(function() {
        $(".patr").fadeOut().promise(); 
            $("button.art").text("Show them all").promise();
        })  })   })  });

我在班级“patr”中有几个正方形。当我按下按钮时我想要显示它们并将文本从“全部显示”更改为“全部隐藏”。

当我再次按下按钮时，我想反过来隐藏方块并将文本从“全部隐藏”更改为“全部显示”，以便可以一次又一次地完成。

问题是，在第一次显示 - 隐藏cicle之后，fadeOut函数会自动启动。

我做错了什么？这是我的jsfiddle链接http://jsfiddle.net/#&togetherjs=gndOED4Qiq

编辑：另一个更简单和正确的版本：

    $("document").ready(function () {
    $("button.art").click(function () {
        $(".patr").fadeToggle();
        if ($(this).hasClass('show')) {
            $(this).text('Hide Them All');
            $(this).removeClass('show').addClass('hide');
        }
    })
});

Answer 1

您可以使用 .fadeToggle() 缩短代码，在淡入和淡出动画之间切换，也可以使用三元运算符设置按钮文字：

$("document").ready(function () {
    $("button.art").click(function () {
        $(".patr").fadeToggle("slow");
        var text = $(this).text();
        $(this).text(text == "Hide them all" ? "Show them all" : "Hide them all");
    })
});

<强> Fiddle Demo

Answer 2

<强> JS FIDDLE DEMO

这就是我的方法：make to function，am set class ie show_cls，hide_cls

$("#myBotton_div").on('click', '.show_cls', function () {
        $(".patr").fadeIn("slow");
        $(this).text("Hide them all");
        $(this).removeClass('show_cls');
        $(this).addClass('hide_cls');
    });

    $("#myBotton_div").on('click', '.hide_cls', function () {
        $(".patr").fadeOut("slow");
        $(this).text("Show them all");
        $(this).removeClass('hide_cls');
        $(this).addClass('show_cls');
    });

FadeIn后自动重复FadeOut

2 个答案: