jQuery pomocou správne - jquery, jquery-selectors

Mám stránku, ktorá obsahuje niekoľko položiek webového denníka. K niektorým z týchto záznamov je priradené video. Chcel by som použiť jQuery Prepnúť viditeľnosť videí (po jednom).

Moja otázka sa týka použitia .to, aby som prepínal iba požadované video.

Môj počiatočný jQuery je:

<script type="text/javascript">
$("#toggle").click(function()  {
$("#video").toggle("slow");
});
</script>

Obsah, s ktorým pracujem, je (všimnite si, že tu pracujem v Expression Engine):

 <button id="toggle">Toggle</button>
<div id="video">
{exp:flvplugin playerpath="{site_url}video/player.swf" file="{seminar_video}" playernumber="{entry_id}" backcolor="c6c981" frontcolor="741a0a" width="500" height="325" }
<div id="player{entry_id}"></div>
</div>

Na začiatok by som chcel skryť všetky videá. Potom by som chcel zobraziť iba video spojené s konkrétnym záznamom.

Vďaka.

odpovede:

1 pre odpoveď č. 1

Musíte zavolať next metóda takto:

$("#toggle").click(function() {
$(this).next().toggle("slow");
});

Toto bude fungovať, iba ak je prepínacie tlačidlo bezprostredne pred prvkom videa.
Ak to nie je, môžete to skúsiť

$("#toggle").click(function() {
$(this).nextAll("#video:first").toggle("slow");
});

Ak chcete skryť všetky videá, môžete písať $("#video").hide().

---

Najlepším riešením je umiestniť každé video spolu s prepínacím tlačidlom do samostatného prvku a používať triedy, nie ID.

Napríklad:

<div class="VideoContainer">
<button class="toggle">Toggle</button>
<div class="video">
{exp:flvplugin playerpath="{site_url}video/player.swf" file="{seminar_video}" playernumber="{entry_id}" backcolor="c6c981" frontcolor="741a0a" width="500" height="325" }
<div id="player{entry_id}"></div>
</div>

Potom môžete písať

$("VideoContainer .toggle").click(function() {
$(this).siblings(".video").toggle("slow");
});

---

0 pre odpoveď č. 2

Ak má každé video jedinečné ID, nemusíte ho používať $(this), stačí uviesť správne ID. Ak chcete, aby videá začínali skryté, nastavte ich CSS display: none;

---

0 pre odpoveď č. 3

To by malo fungovať tak, že skryjete všetky kliknutia a potom zobrazíte konkrétneho hráča (priamo za tlačidlom v DOM:

<script type="text/javascript">
$("#toggle").click(function()  {
$("div[id*="player"]").hide(); /* hide all */
$(this).next().toggle("slow"); /* show */
});
</script>

---