加載一個不同的div onclick jquery

我想爲使用jquery的靜態網站製作一個簡單的lightbox。加載一個不同的div onclick jquery

當我點擊一個鏈接時，燈箱會出現，您可以通過點擊十字架再次關閉它。

我有幾個div，我想加載到燈箱，我顯然只想要一個出現在一次。正如我剛纔所說的，如果你點擊任何鏈接，它們都會同時出現。這是因爲所有人都有一個類.hidden，它們的樣式。我無法弄清楚如何在lightbox中加載一個div，具體取決於點擊哪個鏈接。

這是我的JSFiddle給你一個更好的理解。

我明顯可以爲每個單獨的div單獨編寫函數。

有超過30個div，所以我只是想知道是否有一個簡單的解決方法。

來源

2013-11-21 Steven_Harris_

使用索引功能，以確定被點擊其中的鏈接：

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

來源

2013-11-21 16:02:58 Alex

謝謝你，如果你有時間，你能解釋一下第一個功能是幹什麼的？ –

當然！您正在選擇$（「。hidden-click」）元素，它會生成一組元素。你調用該數組的索引函數，比較每個數組元素與this =被單擊的元素。只要它在選定的元素中找到它，它就會返回索引，id est是數組中的鍵/位置（從0開始）:)得到了那個？我可以寫一個函數作爲例子 – Alex

您可以使用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/

來源

2013-11-21 16:05:36

$(".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

來源

2013-11-21 16:07:16 Bhadra

加載一個不同的div onclick jquery

回答

相關問題