jQuery using .this правильно

Question

У меня есть страница, на которой есть несколько записей в блоге. В некоторых из этих записей есть видео, связанное с ними. Я хотел бы использовать jQuery Переключить видимость видео (по одному).

Мой вопрос касается использования. Этого, чтобы я только переключил желаемое видео.

Мой первоначальный JQuery является:

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

Содержание Я работаю с собой (обратите внимание, я работаю в 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> 

Для начала я хотел бы скрыть все видео. Затем я хотел бы показать только видео, связанное с конкретной записью.

Спасибо.

Answer 1

Вам нужно вызвать метод next, как это:

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

Это будет работать только тогда, когда кнопка переключения находится непосредственно перед видеоэлементом.
Если это не так, вы можете попробовать

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

Чтобы скрыть все видео, вы можете написать $('#video').hide().

---

Лучшим решение поместить все видео вместе с тумблером внутри отдельного элемента, и использовать классы, а не идентификаторы.

Например:

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

Вы можете написать

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

Answer 2

Если каждое видео имеет уникальный идентификатор вам не придется использовать $(this), просто ссылаться на правильный идентификатор. Для видео, чтобы начать скрытый установить их CSS display: none;

Answer 3

Это должно работать, чтобы скрыть все по щелчку, а затем показать конкретный игрок (сразу после кнопки в DOM:

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