0

我正在使用 jquery 切换来显示带有内容的 div。不知道如何解释我遇到的问题，但是如果您转到我的测试页面并单击类似电影的第一个链接（它与电影 500 Days of Summer 相吻合），您会看到一个面板打开了类似的电影. 如果您转到下一个类似电影链接（与我讨厌您的 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>
4

4 回答 4

2

不要为面板使用 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 时会出现问题。

于 2013-03-14T22:13:02.923 回答
0

尝试类似的东西；

<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");
 })
于 2013-03-14T22:38:33.700 回答
0

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

$(document).ready(function(){
$(".flip").click(function(){
    $(this).next().slideToggle("slow");
  });
});
于 2013-03-14T22:13:56.493 回答
0

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

代码可能如下所示：

$(document).ready(function(){
    $('.flip').click(function(){
        $(this).next('.panel').slideToggle('slow');
    });
});
于 2013-03-14T22:14:53.727 回答