jQuery停止点击垃圾邮件

Question

我正在使用 jQuery 制作两个图像箭头来滑动 DIV。我注意到在点击垃圾邮件时，DIV 的边距完全混乱，他们无法回到定义的位置。通过一些搜索，我最终得到了以下代码：

var is_clicked = false;
    $("#arrow_r").click(function(){
        if (is_clicked == true){
            return;
        }
        is_clicked = true;
        var $img_block = $('.photoBlock:visible');//current
        if ($img_block.next().length > 0){
            $img_block.animate({
                    marginLeft:-$('#server_photo_listing').outerWidth()
                },function(){
                    is_clicked = true;
                    var $img_block = $('.photoBlock:visible');//current
                    var $img_block_next = $img_block.next();//next
                    $img_block.css("display","none");
                    $img_block_next.css("display","inherit");
                    $img_block_next.animate({
                        marginLeft:0
                    }
                    );
                    is_clicked = false;
                  });
        }

    });

    $("#arrow_l").click(function(){
        if (is_clicked == true){
            return;
        }
        is_clicked = true;
        var $img_block = $('.photoBlock:visible');//current
        if ($img_block.prev().length > 0){
            $img_block.animate({
                    marginLeft:$('#server_photo_listing').outerWidth() 
                }, function(){
                    is_clicked = true;
                    var $img_block = $('.photoBlock:visible');//current
                    var $img_block_prev = $img_block.prev();//previous
                    $img_block.css("display","none");
                    $img_block_prev.css("display","inherit");
                    $img_block_prev.animate({
                        marginLeft:0
                    }
                    );
                    is_clicked = false;
                  });
        }
    });

虽然当我在第二个箭头上使用它时它最初对一个箭头工作正常，但经过一些点击垃圾邮件测试变量is_clicked仍然是true所以滑动停止。

我还必须说，箭头也用于display:none 上的不同 DIV - 以防它有任何重要性。此外，以上所有代码都包含更多函数，位于主 $(function(){}); 内 - 再次强调，如果它有任何重要性。

有什么想法吗？

Answer 1

您可以在此元素上绑定和取消绑定 clack 事件。

首先创建 2 个函数，在您取消绑定点击事件和动画完成时重新绑定事件。

var go_right = function(){
    $("#arrow_r").unbind('click');
    var $img_block = $('.photoBlock:visible');//current
    if ($img_block.next().length > 0){
        $img_block.animate({
            marginLeft:-$('#server_photo_listing').outerWidth()
        },function(){
            var $img_block = $('.photoBlock:visible');//current
            var $img_block_next = $img_block.next();//next
            $img_block.css("display","none");
            $img_block_next.css("display","inherit");
            $img_block_next.animate({
                marginLeft:0
            }, function () {
                $("#arrow_r").bind('click', go_right);
            });
        });
    }
};
var go_left = function(){
    $("#arrow_l").unbind('click');
    var $img_block = $('.photoBlock:visible');//current
    if ($img_block.prev().length > 0){
        $img_block.animate({
        marginLeft:$('#server_photo_listing').outerWidth() 
        }, function(){
            var $img_block = $('.photoBlock:visible');//current
            var $img_block_prev = $img_block.prev();//previous
            $img_block.css("display","none");
            $img_block_prev.css("display","inherit");
            $img_block_prev.animate({
                marginLeft:0
            }, function () {
                $("#arrow_l").bind('click', go_left);
            });
        });
    }
};

$("#arrow_r").bind('click', go_right);
$("#arrow_l").bind('click', go_left);

希望对你有帮助