Question

我正在制作一个图像灯箱，只有一件事我无法做对。当您第一次点击图库图像时，每个人都能完美地工作。但在关闭灯箱并再次点击图库后，灯箱中的每个图像都会显示为您点击图库的次数。

现在坐了好几个小时但是弄不清楚..

这是一个有效的demo。这是html标记：

<ul class="image_gallery">
    <li>
        <a href="http://route.ekonoom.nl/upload/6676295.jpg">
            <img src="http://route.ekonoom.nl/upload/6676295.jpg" title="foto1">
        </a>

    <li>
        <a href="http://thomasave.be:1234/lars/peer.jpg">
            <img src="http://thomasave.be:1234/lars/peer.jpg" title="foto2">
        </a>

    <li>
        <a href="http://public.media.smithsonianmag.com/legacy_blog/banana2.jpg">
            <img src="http://public.media.smithsonianmag.com/legacy_blog/banana2.jpg" title="foto3">
        </a>

</ul>

这是jQuery：

$('.image_gallery a').click(function(e) {

    e.preventDefault(); // Prevent opening new page

    var image_href = $(this).attr('href'),
        image_title = $(this).find('img').attr('title'),
        number_images = $('.image_gallery img').size(),
        current_image_number = parseInt( $(this).find('img').index('.image_gallery img') ) + 1,
        image_count = current_image_number + '/' + number_images;


    // If lightbox already exists, update and slide in
    if ($('.lightbox').length > 0) {
        updateLightbox();
        $('.lightbox, .lightbox_image, .controls').hide();
        $('.lightbox').slideDown();
        $('.controls').delay(400).slideDown();
        $('.lightbox_image').delay(800).fadeIn();
    }

    // If lightbox doesn't exist yet, create it
    else {
        var lightbox = 
        '<div class="lightbox">' +
            '<p>Click to close</p>' +
            '<div class="lightbox_image">' +
                '<img src="' + image_href +'" >' +
            '</div>' +
            '<div class="controls">' +
                '<div class="title">' + image_title + '</div>' +
                '<button class="prev">prev</button>' +
                '<span class="image_count">' + image_count + '</span>' +
                '<button class="next">next</button>' +
            '</div>' +
        '</div>';

        // Lightbox animates in
        $('body').append(lightbox);
        updateLightbox();
        $('.lightbox, .lightbox_image, .controls').hide();
        $('.lightbox').slideDown();
        $('.controls').delay(400).slideDown();
        $('.lightbox_image').delay(800).fadeIn();

        // Lightbox animates out
        $('.lightbox_image, .lightbox p').click(function() {
            $('.lightbox_image').fadeOut();
            $('.controls').delay(400).slideUp();
            $('.lightbox').delay(800).slideUp();
        });
    }


    // On click for prev/next image
    $('.lightbox button').click(function(){

        // On click for next image
        if ( $(this).hasClass('next')) {

            // Find next image and title
            image_href = $('.image_gallery a').eq(current_image_number).attr('href');
            image_title = $('.image_gallery img').eq(current_image_number).attr('title');

            // Update current image number
            current_image_number++;
            updateLightbox();
        };

        // On click for prev image
        if ( $(this).hasClass('prev')) {

            // Find prev image and title
            image_href = $('.image_gallery a').eq(current_image_number - 2).attr('href');
            image_title = $('.image_gallery img').eq(current_image_number - 2).attr('title');

            // Update current image number
            current_image_number--;
            updateLightbox();
        };
    });


    // Update lightbox
    function updateLightbox(){

        // Update .controls content
        var image_count = current_image_number + '/' + number_images;
        $('.image_count').html(image_count);
        $('.title').html(image_title);

        // If first or last image is clicked, disable associated control
        $('.prev, .next').removeAttr('disabled');
        if (current_image_number == 1) {
            $('.prev').attr('disabled', 'true');
        };
        if (current_image_number == number_images) {
            $('.next').attr('disabled', 'true');
        };

        // Make a fading transition
        $('.lightbox_image').fadeOut(300).fadeIn(300);
        setTimeout(function(){
            $('.lightbox_image').html('<img src="' + image_href + '" />');
        }, 300);
    };
});

Answer 1

您必须从按钮取消绑定点击事件。他们一次又一次地被绑定。

       $('.lightbox button').unbind('click');

检查这个jsfiddle。 http://jsfiddle.net/shinde87sagar/ZpVK2/1/

单击图库时，jQuery函数运行次数过多

1 个答案: