Question

我有一个页面上有许多博客条目。其中一些条目具有与之关联的视频。我想使用jQuery切换视频的可见性（一次一个）。

我的问题与.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>

首先，我想要隐藏所有视频。然后我想只显示与特定条目相关的视频。

感谢。

Answer 1

您需要调用next方法，如下所示：

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

这仅在切换按钮位于视频元素之前时才有效如果不是，您可以尝试

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

要隐藏所有视频，您可以撰写$('#video').hide()。

最佳解决方案是将每个视频及其切换按钮放在一个单独的元素中，并使用类，而不是ID。

例如：

<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

如果每个视频都有唯一ID，则不必使用$(this)，只需引用正确的ID即可。要让视频开始隐藏，请设置他们的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>

jQuery正确使用.this

3 个答案: