1

目前，以下代码仅适用于一个容器。我希望只制作与单击 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>";

提前致谢。

4

2 回答 2

1

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

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

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

希望这可以帮助。

于 2013-09-16T22:11:24.557 回答
0

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

于 2013-09-16T22:11:35.053 回答