jQuery usando .this correctamente - jquery, jquery-selectores

Tengo una página que tiene varias entradas de weblog. Algunas de esas entradas tienen video asociado con ellos. Me gustaría usar jQuery Toggle la visibilidad de los videos (uno a la vez).

Mi pregunta se relaciona con el uso de .this para que solo alterne el video deseado.

Mi jQuery inicial es:

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

El contenido con el que estoy trabajando es (tenga en cuenta que estoy trabajando en Expression Engine aquí):

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

Para empezar me gustaría ocultar todos los videos. Luego me gustaría mostrar solo el video asociado con la entrada en particular.

Gracias.

Respuestas

1 para la respuesta № 1

Necesitas llamar al next método, como este:

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

Esto solo funcionará si el botón de alternar está inmediatamente antes del elemento de video.
Si no es así, puedes intentarlo

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

Para ocultar todos los videos, puedes escribir $("#video").hide().

---

La mejor solución es colocar cada video junto con su botón de alternar dentro de un elemento separado y usar clases, no ID.

Por ejemplo:

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

Entonces puedes escribir

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

---

0 para la respuesta № 2

Si cada video tiene una identificación única, no tendrás que usar $(this), simplemente haga referencia a la identificación correcta. Para que los videos comiencen ocultos configuran su css. display: none;

---

0 para la respuesta № 3

Esto debería funcionar para ocultar todo al hacer clic, luego mostrar el jugador específico (directamente después del botón en el DOM:

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

---