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

あなたのスクリプトでは、決して指定しないので、どのライトボックスをプルアップするのかわかりません。ライトボックスを設定できる1つの方法は、<a>属性の1つにライトボックスidを指定することです。次に、クリックすると、今使用している汎用$('.backdrop, .box')ではなく、その属性と参照の値を引き出して$("#valuePulledFromAttribute")とします。

私はHTML5を使用していないフォークを作成することができた：あなたが使用whereever 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');}) 

    }); 
}); 

​