jquery相冊使用列表

Question

我已經使用html列表做了jquery照片庫。我對上一個和下一個按鈕有問題。當您在加載後立即打開照片時，它們可以正常工作。如果關閉畫廊，請轉到其他照片並單擊它以打開我的下一個和上一個變量，這些變量有些無法正常工作，它們會跳過照片。我想要做的是使用變量和jQuery .next和.previous的箭頭。

非常感謝您的幫助。

我有它的演示這裏http://jsbin.com/uvikug/11/edit

打開一張照片，一個和上一個按鈕的代碼具體是這樣的，但你可以看到這一切在那個鏈接：

$(".photo").click(function() { 
    $("#loading_box_container").animate({ 
    height: "100%" 
    }, 300, function() { 
     $("#close").css({ 
     display: "block" 
     });   
    }); 

    id = $(this).attr('id'); 
    $('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id + '.jpg'); 

    fadeIn('#' + id); 


    $("#next").click(function() { 
    if (!$('#' + id).hasClass("last")) { 
     $("#preload").fadeOut(500, function() { 
     var id_a = $('#' + id).next().attr('id'); 
     id = id_a; 

     $('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id_a + '.jpg'); 

     fadeIn('#' + id_a); 
     }); 
    } 
    }); 

    $("#prev").click(function() { 
    if (!$('#' + id).hasClass("first")) { 
     $("#preload").fadeOut(500, function() { 
     var id_b = $('#' + id).prev().attr('id'); 
     id = id_b; 

     $('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id + '.jpg'); 

     fadeIn('#' + id); 
     }); 
    } 
    }); 
}); 

Answer 1

基本上你的代碼一點也不差，只是一個小問題，每當有人點擊<li class="photo" />時，它都會附加事件處理程序。

只要把塊

$("#prev").click(function() {..和"$("#next").click(function() { ..."和每一個這樣的代碼塊"$(".photo").click(function() { ... })"的出方。

它會正常工作。