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个函数，在取消绑定click事件的事件和动画完成的位置重新绑定事件。

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);

希望能帮到你

jQuery停止点击垃圾邮件

1 个答案: