加載不同的畫廊滑塊，具體取決於項目

Question

我的畫廊中有三個箱子項目（畫廊最終會增長），每個項目點擊時必須打開一個彈出式畫廊滑塊，並在其中包含圖像。所以這將是三個不同的滑塊，也許在未來更多。

我該如何區別每個箱子廊和其他？所以點擊它只是一個獨立的畫廊，而不是所有的圖像？

這是我的標記：

<a class="box small" onclick="openslider()" href="javascript:void(0)"> 
     <img src="/1.jpg" width="200" height="200" /> 
     <h5>Title 1</h5> 
     <p>Description 1</p> 
    </a> 

    <a class="box small" onclick="openslider()" href="javascript:void(0)"> 
     <img src="/2.jpg" width="200" height="200" /> 
     <h5>Title 2</h5> 
     <p>Description 2</p> 
    </a> 

    <a class="box small" onclick="openslider()" href="javascript:void(0)"> 
     <img src="/3.jpg" width="200" height="200" /> 
     <h5>Title 3</h5> 
     <p>Description 3</p> 
    </a> 

的JS：

function openslider(){ 
    $('.modal_container').fadeIn(); 
} 

滑塊標記：

<div class="slider_box gallery1"> 
    <div class="slider"> 
     <img src="/img/slider.jpg" alt="slider" width="587" height="414" /> 
     <img src="/img/slider2.jpg" alt="slider2" width="800" height="564" /> 
     <img src="/img/slider3.jpg" alt="slider3" width="587" height="414" /> 
     <img src="/img/slider4.jpg" alt="slider4" width="800" height="564" /> 
    </div> 
</div> 

Answer 1

章安格像

<a id="gallery1" class="box small" onclick="openslider(event, this)" href="javascript:void(0)"> 
     <img src="/3.jpg" width="200" height="200" /> 
     <h5>Title 3</h5> 
     <p>Description 3</p> 
    </a> 

你的HTML這樣當openSlider被調用，它需要在OBJ obj的參考然後改變你的JS代碼一樣

function openslider(event, obj){ 
    if($(obj).attr(id) == "gallery1") 
    $('.modal_container').fadeIn(); 
    if($(obj).attr(id) == "gallery2") 
    $('.the_other_modal_container').fadeIn(); 
} 

，因此您可以根據ID的你有做出選擇在<a>錨標記

編輯：

如果你有很多的畫廊，即很多IF條件，你可以簡單的選擇一個ID方案像

<a id="box_1" ...> 

，然後選擇數字部分，並在您.model_container使用它

function openslider(event, obj){ 
    var id = $(obj).attr(id).split("_")[1]; 
    $('#gallery_'+'id).fadeIn(); 
    } 

因此，簡而言之，給IDS到你的錨標記，且畫廊該方案

<a id="box_1"> 
<div id="gallery_1"> 

<a id="box_2"> 
<div id="gallery_2"> 

... 

等