Question

我正在使用jquery切换来显示带有内容的div。不确定如何解释我遇到的问题，但是如果你进入我的测试页面并点击类似电影的第一个链接（它与电影500天夏天一致）你会看到一个面板打开类似的电影。如果你转到下一个类似电影链接（与我讨厌你的10件事情重合），你会发现它仍然控制着第一组电影，这意味着它可以上下切换面板。实际上，所有类似电影链接都控制着第一个面板。不知道如何解决这个问题。 *删除链接 - 不再需要 - 非常感谢！

<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script> 

<div class="flip">Similar Movies
</div><!-- end of flip-->

    <div id="panel">
similar movies are echoed here from a database using php...
</div>

Answer 1

不要使用面板的ID，而是使用类，如下所示：

<div class="panel">
  similar movies are echoed here from a database using php...
</div>

然后在你的jQuery中：

$(document).ready(function() {
  $(".flip").click(function() {
    $(this).siblings(".panel").slideToggle("slow");
  });
});

不建议在多个元素上使用相同的ID，并且在使用jQuery时将especially present problems。

Answer 2

那是因为你有很多具有相同“id”的div。您可以使用以下代码修复它：

$(document).ready(function(){
$(".flip").click(function(){
    $(this).next().slideToggle("slow");
  });
});

Answer 3

这是因为你的点击功能只是用面板的id切换div，这是第一个id。如果你有其他具有此id的div，它们将被忽略，因为id必须是唯一的，jQuery将只找到具有指定值的第一个id并使用它。您应该从id="panel"更改为class="panel"并修改您的jQuery函数以查找具有类panel的下一个兄弟元素并将其切换。

代码可能如下所示：

$(document).ready(function(){
    $('.flip').click(function(){
        $(this).next('.panel').slideToggle('slow');
    });
});

Answer 4

尝试类似的事情;

<div class="container">
<div class="flip">Similar Movies
</div><!-- end of flip-->

    <div class="panel">
similar movies are echoed here from a database using php...
</div>
</div>

var panel;
$(".flip").click(function(){
    panel = $(this).parent('.container').children('.panel');
    panel.slideToggle("slow");
 })

jquery切换问题

4 个答案: