jquery：如何使用相同的jQuery代碼構建多個燈箱？

Question

我們怎樣才能使通用的燈箱我的意思是在 這裏頁面中所有燈箱功能相同的代碼JQuery的

$(document).ready(function() { 

     $('.lightbox').click(function() { 
      $('.backdrop, .box').animate({ 
       'opacity': '.50' 
      }, 300, 'linear'); 
      $('.box').animate({ 
       'opacity': '1.00' 
      }, 300, 'linear'); 
      $('.backdrop, .box').css('display', 'block'); 
     }); 

     $('.close').click(function() { 
      close_box(); 
     }); 

     $('.backdrop').click(function() { 
      close_box(); 
     }); 

    }); 

    function close_box() { 
     $('.backdrop, .box').animate({ 
      'opacity': '0' 
     }, 300, 'linear', function() { 
      $('.backdrop, .box').css('display', 'none'); 
     }); 

} 

DEMO

Answer 1

您的腳本不知道要將哪個燈箱拉起來，因爲您從未指定過燈箱。您可以設置燈箱的一種方法是在<a>屬性之一中指定燈箱id。然後，單擊時，將該屬性的值與$("#valuePulledFromAttribute")相比較，而不是您現在使用的通用$('.backdrop, .box')。

我能夠創建一個使用HTML5沒有叉子：http://jsfiddle.net/J6ee5/2/

$(document).ready(function() { 

$('.lightbox').click(function() { 
    var thisBox = $(this).attr("name"); 
    console.log(thisBox); 
    $('.backdrop,.' + thisBox).animate({ 
     'opacity': '.50' 
    }, 300, 'linear'); 
    $('.box').animate({ 
     'opacity': '1.00' 
    }, 300, 'linear'); 
    $('.backdrop,.' + thisBox).css('display', 'block'); 
}); 

$('.close').click(function() { 
    close_box(); 
}); 

$('.backdrop').click(function() { 
    close_box(); 
}); 

function close_box() { 
    $('.backdrop,.box').animate({ 
     'opacity': '0' 
    }, 300, 'linear', function() { 
     $('.backdrop,.box').css('display', 'none'); 
    }); 
}​ 
}); 

Answer 2

一種選擇是使用盡可能選擇http://jsfiddle.net/Q676T/1/

數據屬性

$(document).ready(function() { 

    $('.lightbox').click(function() { 
     var dataTag = $(this).data('tag'); 
     $('.backdrop') 
      .animate({'opacity': '.50'}, 300, 'linear') 
      .css('display', 'block'); 

     $('.box[data-tag='+dataTag+']') 
      .animate({'opacity': '1'}, 300, 'linear') 
      .css('display', 'block');  
    }); 

    $('.close, .backdrop').click(function() { 
     $('.backdrop, .box') 
      .animate({'opacity': '0'}, 300, 'linear', 
        function(){ $(this).css('display', 'none');}) 

    }); 
}); 

​