javascript - 奇怪的 Javascript 行为

Question

我的页面上有以下代码，在 pagereload 之后它工作正常，但如果不重新加载，这个脚本将无法按预期工作。

第一次使用：效果很好
第二次使用：为什么它会跳过 1 级？
第三次使用：跳过2个班级

如何在不重新加载页面的情况下刷新脚本或我需要做什么？

$(document).ready(function(){  

 $('.partImg').each(function(){
        $(this).click(function(){
            $("#hideMod, #visMod, #nextP, #closeP, #prevP").fadeIn(400);
            $(this).next().addClass("ASert");
            var AV = $(".ASert").text();
            $('#visMod').html("<img src='" + AV + "'/>");

            $("#nextP").click(function(){
                if ($('.hidePart:last').hasClass("ASert") ) {
                    $('.hidePart:first').addClass("ASert");
                    $('.ASert').last().removeClass("ASert");
                } else {        
                    $('.ASert').next().next().addClass("ASert");
                    $('.ASert').first().removeClass("ASert");
                }
                var AV = $(".ASert").text();
                $('#visMod').html("<img src='" + AV + "'/>");
            });

            $("#prevP").click(function(){
                if ($('.hidePart:first').hasClass("ASert") ) {
                    $('.hidePart:last').addClass("ASert");
                    $('.ASert').first().removeClass("ASert");        
                } else {        
                    $('.ASert').prev().prev().addClass("ASert");
                    $('.ASert').last().removeClass("ASert");        
                }
                var AV = $(".ASert").text();
                $('#visMod').html("<img src='" + AV + "'/>");
            });        

            $("#closeP").click(function(){
                $("#hideMod, #visMod, #nextP, #closeP, #prevP").fadeOut(200);
                $(".ASert").removeClass("ASert");
            });
       });
    });
});

http://istyle.kz/test/index.php?id=32在这里你可以查看问题点。

1. 单击任何图像并尝试上一个/下一个
2. 关闭灯箱
3. 再次单击图像并尝试上一个/下一个

Answer 1

这是 javascript 很常见的问题。在单击处理程序中，您正在绑定另一个单击处理程序。如果有必要，应在某处执行解除绑定。

然而，这似乎没有必要。因此，我建议以这种方式重构代码：

$(function(){
    $("#nextP").on("click", function(){
        //...
    });
    $("#prevP").on("click", function(){
        //...
    });
    $("#closeP").on("click", function(){
        //...
    });
    $('.partImg').on( "click", function(){
        $("#hideMod, #visMod, #nextP, #closeP, #prevP").fadeIn(400);
        //...
    });
});

希望这可以帮助。