在Jquery中，通过追加函数以指数形式添加Div

Divs are added exponentially with append funcion in Jquery

本文关键字：指数 Div 添加 函数 追加 Jquery      更新时间：2023-12-05

我有一个jquery灯箱，但导航不太好用。我向body标记添加了带有append功能的灯箱，但当我单击下一个箭头时，添加到body标记的灯箱会成倍增加。一开始我可以看到下一个项目，但之后我得到了第四个。我得到了这条线：1,2,4,8,16。

lightboxdiv只向body标记添加了一次的函数中需要更改什么？

$(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(); });
        }
    }
})
});

.append()每次运行时都会不断添加元素。在追加新元素之前，需要先remove()旧元素。

这样做：

$('.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");

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

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

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

相关文章：