Question

目前，以下代码仅适用于一个容器。我希望只制作与点击slideToggle相关的描述。

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>";

提前致谢。

Answer 1

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

ID永远不会在页面上出现多次，并且标记无效。

将ID更改为类，它应该解决您的问题：）

希望这有帮助。

Answer 2

您似乎正在复制容器中的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中的第一个

使用jquery正确地使用.next（）元素slideToggle？

2 个答案: