Question

我正在尝试使用jquery为静态网站制作一个简单的灯箱。

当我点击链接时，灯箱会出现，您可以通过单击十字架再次关闭它。

我有几个div要加载到灯箱中，我显然只希望一次出现一个。正如我刚才所说，如果你点击任何链接，它们都会同时出现。这是因为所有人都有一个类.hidden，它们对它们进行样式化。我无法弄清楚如何在灯箱内加载一个div，具体取决于点击的链接。

这是我的JSFiddle，可以让您更好地理解。

我显然可以为每个div单独编写函数。

有超过30个div，所以我只是想知道是否有一个简单的方法。

Answer 1

使用索引函数确定单击了哪个链接：

var index = $(".hidden-click").index(this);
$(".trans, .hidden:eq(" + index + ")").fadeIn(500);

完整代码：

$(".hidden-click").click(function() {

    var index = $(".hidden-click").index(this);

    $(".trans, .hidden:eq(" + index + ")").fadeIn(500);
});

$(".cross-link").click(function() { 

     $(".trans, .hidden").fadeOut(500);
});

and a working fiddle

Answer 2

您可以使用data这样的属性 -

<div class="trans" style="display:none">
    <div class="cross-link">X</div>
</div>

<div class="hidden hidden-one" style="display:none"></div>
<div class="hidden hidden-two" style="display:none"></div>

<div class="one hidden-click" data-id='one'>ONE</div>
<div class="two hidden-click" data-id='two'>TWO</div>

脚本：

$(".hidden-click").click(function() { 
     var id = $(this).data('id');
     $(".trans, .hidden.hidden-"+id).fadeIn(500);
});

$(".cross-link").click(function() { 
     $(".trans, .hidden").fadeOut(500);
});

演示-----> http://jsfiddle.net/C5XmJ/2/

Answer 3

$(".hidden-click").click(function() { 
 var index=$(this).index();
 $(".trans").fadeIn(500);
$('.hidden').eq(index).fadeIn(500);
});

$(".cross-link").click(function() { 
    $(".trans, .hidden").fadeOut(500);
});


    http://jsfiddle.net/C5XmJ/3/  updated the fiddle

加载一个不同的div onclick jquery

3 个答案: