0

我的画廊中有三个盒子项目（画廊最终会增长），每个项目在单击时都必须打开一个弹出画廊滑块，其中包含它的图像。所以这将是三个不同的滑块，将来可能会更多。

我怎样才能将每个盒子画廊与其他画廊区分开来？所以当点击它只是一个独立的画廊而不是所有的图像？

这是我的标记：

    <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>
4

1 回答 1

0

改变你的 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 进行选择

编辑：

如果您有很多画廊，即很多 IF 条件，您可以简单地选择一个 ID 方案，例如

<a id="box_1" ...>

然后选择数字部分并在您的 .model_container 中使用它

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

因此，简而言之，在此方案中为您的锚标签和画廊提供 id

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

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

...

等等

于 2013-06-18T14:07:50.667 回答