Javascript 在Jquery中，div是通过append函数以指数方式添加的

我有一个jquery lightbox，但是导航不太好。我将带有append函数的lightbox添加到body标记，但是当我单击下一个箭头时，添加到body标记的lightbox会成倍增加。起初我可以看到下一个项目，但之后我得到了第四个项目。我得到这条线：1，2，4，8，16

lightbox div只向body tag添加了一次的函数中需要更改哪些内容

$(document).ready(function() {
var item, img, large_img, imgtag;
var doc = $(document);

$("#lightbox li").click(function() {

    item = $(this);
    img = item.find("img");
    large_img = new Image();
    large_img.src = img.attr("data-large") ? img.attr("data-large") : img.attr("src");
    $("#lightbox li.active").removeClass("active");
    item.addClass("active");

    var gallery = '<div class="gallery"><span class="galleryclose"></span><div class="gallerycontent"><div class="galleryimg">' + large_img + '</div></div></div>';
    var controls = '<span class="previmg"></span><span class="nextimg"></span>';
    $(gallery).appendTo("body");

    $(large_img).load(function() {
        $(".gallerycontent").html(function() {
            imgtag = '<div class="galleryimg"><img src="' + large_img.src + '" style="opacity: 0; " /><span class="previmg"></span><span class="nextimg"></span></div>';
            $(".gallerycontent").html(imgtag);
            $(".gallerycontent img").fadeTo(600, 1);
        })
    })

    doc.on("click", ".previmg", function() {navigate(-1)});
    doc.on("click", ".nextimg", function() {navigate(1)});
    doc.on("click", ".galleryclose", function(){ navigate(0) });

    function navigate(direction){
        if (direction == -1){
            $("#lightbox li.active").prev().trigger("click");
            }
        else if (direction == 1){ 
            $("#lightbox li.active").next().trigger("click");
            }
        else if (direction == 0){
            $("#lightbox li.active").removeClass("active");
            $(".gallery").fadeOut(300, function() { $(this).remove(); });
        }
    }
})
});

$（文档）.ready（函数（）{
var项目、img、大型img、imgtag；
var doc=$（文档）；
$（“#lightbox li”）。单击（函数（）{
项目=$（本项目）；
img=项目查找（“img”）；
大_img=新图像（）；
large_img.src=img.attr（“数据大”）？img.attr（“数据大”）：img.attr（“src”）；
$（“#lightbox li.active”）.removeClass（“active”）；
项目。添加类别（“活动”）；
var gallery=''+大型img+''；
var控制=“”；
$（图集）。附录（“正文”）；
$（大的）。加载（函数（）{
$（“.gallerycontent”）.html（函数（）{
imgtag=''；
$（“.gallerycontent”）.html（imgtag）；
$（“.gallerycontent img”）.fadeTo（600,1）；
})
})
doc.on（“单击“，”.previmgfunction（）{navigate（-1）}）；
doc.on（“单击“，”.nextimg”，function（）{navigate（1）}）；
doc.on（“click”、“.galleryclose”，function（）{navigate（0）}）；
功能导航（方向）{
如果（方向==-1）{
$（“#lightbox li.active”）.prev（）触发器（“单击”）；
}
如果（方向==1）{
$（“#lightbox li.active”）.next（）.trigger（“单击”）；
}
else如果（方向==0）{
$（“#lightbox li.active”）.removeClass（“active”）；
$（“.gallery”）.fadeOut（300，function（）{$（this.remove（）；}）；
}
}
})
});

.append（）

将在每次运行时不断添加元素。在追加新元素之前，需要删除旧元素

这样做：

$('.gallery').remove();  // add this line
var gallery = '<div class="gallery"><span class="galleryclose"></span><div class="gallerycontent"><div class="galleryimg">' + large_img + '</div></div></div>';
var controls = '<span class="previmg"></span><span class="nextimg"></span>';
$(gallery).appendTo("body");

$（'.gallery'）.remove（）；//添加这一行
var gallery=''+大型img+''；
var控制=“”；
$（图集）。附录（“正文”）；

.append（）

将在每次运行时不断添加元素。在追加新元素之前，需要删除旧元素

这样做：

$('.gallery').remove();  // add this line
var gallery = '<div class="gallery"><span class="galleryclose"></span><div class="gallerycontent"><div class="galleryimg">' + large_img + '</div></div></div>';
var controls = '<span class="previmg"></span><span class="nextimg"></span>';
$(gallery).appendTo("body");

$（'.gallery'）.remove（）；//添加这一行
var gallery=''+大型img+''；
var控制=“”；
$（图集）。附录（“正文”）；

每次单击li时，都会向所有元素添加更多的单击事件

• 第一次单击-添加了一次单击事件
• 第二次单击-添加新的单击加上您有第一次单击
• 第三次单击-添加新的单击加上您有第二次单击和第一次单击

---

这就是为什么在单击事件中添加单击事件是个坏主意。

每次单击li时，都会向所有元素添加更多的单击事件

• 第一次单击-添加了一次单击事件
• 第二次单击-添加新的单击加上您有第一次单击
• 第三次单击-添加新的单击加上您有第二次单击和第一次单击

这就是为什么在单击事件中添加单击事件是个坏主意