1

現時点では、以下のコードは 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 はページに 2 回以上表示されるべきではなく、無効なマークアップです。

IDをクラスに変更すると、問題が解決するはずです:)

お役に立てれば。

于 2013-09-16T22:11:24.557 に答える
0

コンテナ内で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 に最初に表示されるものを選択するため、失敗します。

于 2013-09-16T22:11:35.053 に答える