我的画廊中有三个盒子元素(画廊最终会增长),单击每个元素时都必须打开一个弹出式画廊 slider ,其中包含图像。所以这将是三个不同的 slider ,将来可能会更多。
我如何区分每个盒子图库?所以当点击它时它只是一个独立的图库而不是所有图像?
这是我的标记:
<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();
}
slider 标记:
<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>
这样当 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();
}
因此您可以根据您在 <a>
中的 ID 进行选择 anchor 标签
编辑:
如果你有很多画廊,即很多 IF 条件,你可以简单地选择一个 ID 方案,比如
<a id="box_1" ...>
然后选择数字部分并在您的 .model_container 中使用它
function openslider(event, obj){
var id = $(obj).attr(id).split("_")[1];
$('#gallery_'+'id).fadeIn();
}
因此,简而言之,在此方案中为您的 anchor 标签和画廊提供 ID
<a id="box_1">
<div id="gallery_1">
<a id="box_2">
<div id="gallery_2">
...
等等
关于javascript - 根据元素加载不同的图库 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17170950/