jQuery utilisant .this correctement

Question

J'ai une page qui contient un certain nombre d'entrées de blog. Certaines de ces entrées sont associées à une vidéo. Je voudrais utiliser jQuery Basculer la visibilité des vidéos (une à la fois).

Ma question concerne l'utilisation de .this pour que je ne change que la vidéo désirée.

Ma première jQuery est:

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

Le contenu Je travaille avec est (notez que je travaille dans Expression Engine ici):

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

Pour commencer, je voudrais cacher tout vidéos. Ensuite, je voudrais montrer seulement la vidéo associée à l'entrée particulière.

Merci.

Answer 1

Vous devez appeler la méthode next, comme ceci:

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

Cela ne fonctionnera que si le bouton à bascule est immédiatement avant l'élément vidéo.
Dans le cas contraire, vous pouvez essayer

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

Pour masquer toutes les vidéos, vous pouvez écrire $('#video').hide().

---

La meilleure solution est de mettre chaque vidéo avec le bouton à bascule dans un élément séparé, et utiliser des classes, pas de numéros.

Par exemple:

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

Vous pouvez alors écrire

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

Answer 2

Si chaque vidéo a un identifiant unique que vous ne devrez pas utiliser $(this), juste référence l'ID correct. Pour les vidéos pour commencer cachés dans leur ligne css display: none;

Answer 3

Cela devrait fonctionner pour cacher tout le clic, puis montrer le joueur spécifique (suivant directement le bouton dans le DOM:

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