Jquery prepínať - rozbaliť / zbaliť na viacerých divách - jquery

Nedávno som zistil, že niektoré veľmi ľahko použiteľné kódy Jquery, ktoré v podstate prepínajú a delia viditeľné a neviditeľné.

Kód pracuje na prvom diele - ale povedzme, že mám viacnásobný zoznam s rovnakou štruktúrou a chcem, aby prepínač fungoval pri kliknutí na konkrétny druhý alebo tretí diel.

Zaujímalo by ma, či je možné rozšíriť nasledujúci kód tak, aby bol dynamický.

Príklad s dvoma dielmi (bude fungovať iba prvý):

<a id="toggle" href="javascript:void(0);">Expand box 1</a>
<div id="content">Content 1</div>
<div id="contentHidden" style="display:none;">Hidden 1</div>

<br><br>

<a id="toggle" href="javascript:void(0);">Expand box 2</a>
<div id="content">Content 2</div>
<div id="contentHidden" style="display:none;">Hidden 2</div>

jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(function() // run after page loads
{
$("#toggle").click(function()
{
// hides matched elements if shown, shows if hidden
$("#content, #contentHidden").toggle();
});
});

odpovede:

3 pre odpoveď č. 1

Najprv by ID malo byť jedinečné pre každý objekt stromu DOM. (viacnásobné delenie s id = "toggle" by nakoniec fungovalo, ale neodporúča sa. V tomto prípade uprednostňujte atribút triedy.)

pre váš problém navrhujem:

<a class="toggle" href="javascript:void(0);">Expand box 1</a>
<div class="content">Content 1</div>
<div class="contentHidden" style="display:none;">Hidden 1</div>

<br><br>

<a class="toggle" href="javascript:void(0);">Expand box 2</a>
<div class="content">Content 2</div>
<div class="contentHidden" style="display:none;">Hidden 2</div>

a kód jQuery:

$(function()
{
$(".toggle").click(function()
{
// hides children divs if shown, shows if hidden
$(this).children("div").toggle();
});
});

---

0 pre odpoveď č. 2

Po prvé: rovnaké ID (prepínanie) nemôžete použiť viackrát.

<a class="toggle" href="#">Expand box 1</a>
<div id="content">Content 1</div>
<div id="contentHidden" style="display:none;">Hidden 1</div>

<br><br>

<a class="toggle" href="#">Expand box 2</a>
<div id="content">Content 2</div>
<div id="contentHidden" style="display:none;">Hidden 2</div>

$(".toggle").click(function() {
var content = $(this).next();
$(content).toggle();
$(content).next().toggle(); // three lines above can also be done in a one-liner, but I prefer separate line for readability. In the end it"s a matter of taste
return false;
});

Zmenil som prepínanie id na class pretože nie je platné HTML opakovane používať rovnaké ID na stránke. ID musia byť jedinečné.

.next() vyberie nasledujúci dom element (sister) v strome

---

0 pre odpoveď č. 3

Atribút id by mal byť jedinečný. Musíte ju zmeniť na triedu:

$(function() // run after page loads
{
$(".toggle").click(function()
{
// hides matched elements if shown, shows if hidden
$(this).next().toggle();
$(this).next().next().toggle();

return false;
});
});

<a class="toggle" href="javascript:void(0);">Expand box 1</a>
<div>Content 1</div>
<div style="display:none;">Hidden 1</div>

<br><br>

<a class="toggle" href="javascript:void(0);">Expand box 2</a>
<div>Content 2</div>
<div style="display:none;">Hidden 2</div>

---

0 pre odpoveď č. 4

Päsť zo všetkých, ktoré nesmiete používať ids viackrát: v tomto prípade funguje iba jeden, pretože udalosť je pripojená iba k prvému zhodujúcemu sa ID.

Každopádne by sa vám to mohlo páčiť: (http://jsfiddle.net/7Kmny/)

<a class="toggle" href="javascript:void(0);">Expand box 1</a>
<div id="content">Content 1</div>
<div id="contentHidden" style="display:none;">Hidden 1</div>

<br><br>

<a class="toggle" href="javascript:void(0);">Expand box 2</a>
<div id="content">Content 2</div>
<div id="contentHidden" style="display:none;">Hidden 2</div>
$(".toggle").click(function()
{
// hides matched elements if shown, shows if hidden
$(this).next().toggle();
$(this).next().next().toggle();
});

---

-2 pre odpoveď č. 5

Funguje to iba s prvou div, pretože ID musí byť na stránke jedinečné. Mali by ste používať triedy na prácu s viacerými značkami.

<a class="toggle" href="javascript:void(0);">Expand box 1</a>
<div>
<div class="content">Content 1</div>
<div class="contentHidden" style="display:none;">Hidden 1</div>
</div>
<br><br>

<a class="toggle" href="javascript:void(0);">Expand box 2</a>
<div>
<div class="content">Content 2</div>
<div class="contentHidden" style="display:none;">Hidden 2</div>
</div>

jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(function() // run after page loads
{
$(".toggle").click(function()
{
// hides matched elements if shown, shows if hidden
$(".content, .contentHidden", $(this).next()).toggle();
});
});

---