第一次我的功能運行良好，第二次錯誤的jquery

-1

我想做一個燈箱。但是當我第二次打開燈箱。它通過我的代碼兩次。當我第三次打開我的燈箱時，它會通過我的代碼三次。一點都不明白。第一次我的功能運行良好，第二次錯誤的jquery

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

請幫幫我，關於代碼的一些反饋總是有幫助的。由於

來源

2014-06-13 Bart Hoekstra

的問題是在這裏：

function thumpNav() { 

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

你安裝你叫thumpNav一個新的單擊處理程序每次，他們都將執行並做同樣的事情每次你點擊。

替換：

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

就像你arrowNav()一樣。

請注意，您的代碼效率很低，而且結構不正確。即使這種方式有效，當你像這樣玩弄點擊處理程序時，它也不好。至少將回調定義爲一個單獨的函數，並將其作爲參數傳遞給click()。

如果您想獲得改進代碼的幫助，您可以隨時在Codereview上發佈。

來源

2014-06-13 10:00:04 MarioDS

thumpNav函數工作正常。這是不正確的arrowNav函數。感謝Codereview上的提示。 –

非常感謝它的工作。我使用瞭解綁定點擊功能。 –

正是我所說的：/ – Muqito

每次你打電話：

thumpNav();

你安裝一個新的單擊處理程序。

同樣與arrowNav()

但ATLEAST在這裏，你先解除綁定。

來源

2014-06-13 10:00:34 Muqito

第一次我的功能運行良好，第二次錯誤的jquery

回答

相關問題