Javascript 根据项目加载不同的库滑块
我的图库中有三个框项目(图库最终会增长),单击每个项目时必须打开一个带有图像的弹出图库滑块。所以它将是三个不同的滑块,将来可能会更多 如何将每个盒子库与其他库区分开来?因此,当单击它时,它只是一个独立的库,而不是所有的图像 这是我的标记:Javascript 根据项目加载不同的库滑块,javascript,jquery,html,css,ajax,Javascript,Jquery,Html,Css,Ajax,我的图库中有三个框项目(图库最终会增长),单击每个项目时必须打开一个带有图像的弹出图库滑块。所以它将是三个不同的滑块,将来可能会更多 如何将每个盒子库与其他库区分开来?因此,当单击它时,它只是一个独立的库,而不是所有的图像 这是我的标记: <a class="box small" onclick="openslider()" href="javascript:void(0)"> <img src="/1.jpg" width="200" height="
<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>
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>
滑块标记:
<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>
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>
像这样更改HTML
<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>
因此,您可以根据
锚定标记中的id进行选择
编辑:
如果您有很多库,即很多IF条件,您可以简单地选择一个ID方案,如
<a id="box_1" ...>
因此,简而言之,在这个方案中为你的锚定标签和你的图库提供ID
<a id="box_1">
<div id="gallery_1">
<a id="box_2">
<div id="gallery_2">
...
...
等等openslider(这个)是一个很好的开始,但是如果画廊增加到10个盒子项目呢?