Question

我正在尝试制作一个灯箱。但是当我第二次打开灯箱时。它通过我的代码两次。当我第三次打开我的灯箱时，它会通过我的代码三次。根本不明白。

$(document).ready(function(){
$('.bg-overlay, .overlay-content, .overlay-content img').hide();

$('.thump-bnr > li').click(function(){

    // show the overlay and bg-overlay
    $('.bg-overlay, .overlay-content').fadeIn(500);

    // gets the index of the thunp thats been clicked in the banner
    var x = $(this).index();
    // console.log(x);

    $('.overlay-content > img').eq(x).fadeIn(500);

    // thumpPop checks if there aren't to mutch list items
    var thumpPop = $('.overlay-content .thump-pop li').length;
    // console.log(thumpPop);

    // appends all li for the thump navigation in the overlay
    if (thumpPop < 1) {
        $('.overlay-content').append('<ul class="thump-pop"></ul>');
        for (var i = 0; i < 4; i++) {
            $('.thump-pop').append('<li></li>');
        }
    }

    // sets all thump li to the border white
    $('.thump-pop > li').css("border-color", "#fff");

    // sets the active thump li to a dark border
    $('.thump-pop > li').eq(x).css("border-color", "#e2e2e2");

    // console.log(x);


    // calls the thumpNav function for the thump navigation     
    thumpNav();

    // calles the arrowNav function for the arrow navigation beside the big images
    arrowNav();

});

在这个函数中，我设法只使用if语句执行一次该函数。

// this is the function for the thump navigation
function thumpNav() {

$('.thump-pop > li').click(function(){

    // get the index number of the thump li 
    var y = $(this).index();
    // console.log(y);

    // checks if the big image thats equal to the clicked thump is hidden
    if($('.overlay-content > img').eq(y).is(':hidden')) {

        // fadeIn and fadeOut the big images
        $('.overlay-content img').fadeOut();
        $('.overlay-content > img').eq(y).fadeIn();

        // this wil change the border color of the active li
        $('.thump-pop > li').css("border-color", "#fff");
        $(this).css("border-color", "#e2e2e2");
    }           
});
}

我认为我在函数arrowNav（）中犯了一个错误，因为当我第二次打开我的灯箱时他执行了两次。

function arrowNav() {
$('.arrow-nav-left').click(function(){

    // this wil get the index number of the visible image in the overlay. This number can be used to display the number -1 our +1
    var x = $('.overlay-content').find('img:visible').index();
    // console.log(x); 

    var x = x - 2;
    console.log(x);

        $('.overlay-content > img').hide();
        $('.overlay-content > img').eq(x).show();

});
}



// hides the pop-up
$('.bg-overlay').click(function(){
    $('.bg-overlay, .overlay-content, .overlay-content img').fadeOut(500);
}); 
});

请帮帮我，对代码的一些反馈总是有帮助的。感谢

Answer 1

问题在于：

function thumpNav() {

    $('.thump-pop > li').click(function(){

每次调用thumpNav时，您都会附加一个新的点击处理程序，并且每次点击都会执行并执行相同的操作。

替换为：

function thumpNav() {
    $('.thump-pop > li').unbind("click").click(function(){

就像你对arrowNav()所做的那样。

请注意，您的代码效率非常低，而且结构不正确。即使这种情况有效，当你像这样处理点击处理程序时也不行。至少将回调定义为单独的函数，并将其作为参数传递给click()。

如果您希望获得有关改进代码的帮助，可以随时将其发布到Codereview。

Answer 2

每次你打电话：

thumpNav();

您正在附加新的点击处理程序。

与arrowNav()

相同

但至少在这里你首先解开。

我的第一次运行正常，第二次错误的jquery

2 个答案: