JQuery, используя. это правильно - PullRequest
0 голосов
/ 11 января 2010

У меня есть страница с несколькими записями в блоге.С некоторыми из этих записей связано видео.Я хотел бы использовать jQuery Toggle для отображения видео (по одному за раз).

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

Мойисходный 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>

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

Спасибо.

Ответы [ 3 ]

1 голос
/ 11 января 2010

Вам нужно вызвать метод 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");
});
0 голосов
/ 11 января 2010

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

<script type="text/javascript">
 $("#toggle").click(function()  {
    $("div[id*='player']").hide(); /* hide all */
    $(this).next().toggle("slow"); /* show */
 });
</script>
0 голосов
/ 11 января 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...