使 .next(） 元素滑动使用 jquery 正确切换

Making .next() element slideToggle correctly with jquery?

本文关键字：jquery next 元素      更新时间：2023-09-26

目前，下面的代码仅适用于一个容器。我只想制作与该单击幻灯片切换相关的描述。

jquery：

$("#closedImage").click(function(){
    $('#closedImage').css("display", "none");
    $('#openImage').css("display", "block");
    $(this).parent().next(".jobDescription").slideToggle("slow");
});
$("#openImage").click(function(){
    $('#openImage').css("display", "none");
    $('#closedImage').css("display", "block");
    $(this).parent().next(".jobDescription").slideToggle("slow");
});

php/html - foreach 循环中的内容：

    echo "<div id='"theJob'">";
    echo "<a href='"/job/view/".$job['id']."/".$job['url']."'">";
    echo "<div id='"leftContain'" class='"floatLeft'">";
    echo "<h2 class='"green'">".$job['role']."</h2>";
    echo "<div class='"blue floatLeft'"><h3>".$job['company']." in ".$job['location']."</h3></div><br><br>";        
    echo "</div>";
    echo "</a>";
    echo "<div id='"rightContain'" class='"floatLeft'">";
    echo "<div id='"closedImage'"><img src='"/images/side.png'"></div>";    
    echo "<div id='"openImage'"><img src='"/images/down.png'"></div>";              
    echo "</div>";
    echo "<div class='"jobDescription floatLeft'">";
    echo $job['description'];   
    echo "</div>";
    echo "</div>";

提前谢谢。

您使用的是带有 id 而不是类的 foreach。jquery 中的选择器只会返回它遇到的第一个 id，其余的将被忽略。

ID 不应在页面上出现多次，并且是无效标记。

将 ID 更改为类，它应该可以解决您的问题:)

希望这有帮助。

您似乎正在复制容器中的 id closedImage和openImage等。 而是将它们转换为/添加类名并尝试.

$(".closedImage").click(function(){
    var $this = $(this);
    $this.hide().siblings('.openImage').show();; //hide and show are shortcuts to display none / block
    $this.parent().next(".jobDescription").slideToggle("slow");
});
$(".openImage").click(function(){
    var $this = $(this);
    $this.hide().siblings('.closedImage').show();;
    $this.parent().next(".jobDescription").slideToggle("slow");
});

谨慎使用 id 并将它们转换为类。重复的 id 使您的 html 无效，选择器失败，因为它们将选择出现在 DOM 中的第一个

相关文章：