javascript - 连续按下按钮时不工作

Question

我有以下幻灯片效果，当您连续按同一按钮两次以上时，该效果不起作用。意思是，您选择红色按钮以显示其颜色，再次按红色以隐藏该颜色。当你按第三次时，就不起作用了。要让红色再次发挥作用，您需要选择不同的颜色。所有按钮都会发生这种情况。我该如何阻止这个？ fiddle demo

// When the DOM is ready, initialize the scripts.
jQuery(function( $ ){

    // Get a reference to the container.
    var container = $( ".container" );

    // Bind the link to toggle the slide.
    $( "a" ).click(function( event ){
        // Prevent the default event.
        event.preventDefault();
        var $this = $(this);
        var $target = $("#target");

        if ($target.attr("class") === $this.attr("data-color")) {
            container.slideUp(500);
        } else {
            // Hide - slide up.
            container.slideUp(500, function(){
                $target.attr("class", $this.attr("data-color"));
                // Show - slide down.
                container.slideDown(500);
            });
        }
    });

});

Answer 1

一旦颜色向下滑动，您必须删除类属性，否则它会通过您的条件:

container.slideUp(500, function() {
     $target.removeAttr("class");
});

演示:http://jsfiddle.net/k5L5N/2/