2

複数回表示できるクラスを選択しようとしていますが、JQuery は最初のインスタンスしか選択しません。

JQuery

$(function(){
$(".openNews").click(function() {
    alert("click");

    $(this).parent().find('.newsContent').toggleClass("newsContent-expand");
    $(this).parent().toggleClass("newsItem-expand");
});
});

HTML (これらの newsItem div が多数存在する可能性があり、すべてが 1 つのメイン コンテナーにラップされます)

<div class="newsItem">
     <div class="openNews">G</div>
     <div class="newsHeadline">
          <span class="headline">The other thing</span>
          <span class="author">by: author</span>
          <span class="time">12/07/2012 @ 12:57 pm</span>
     </div>
     <div class="newsContent">
        sdf<br>
        sdf<br>
        sdf<br>
        sdfdsfsdfsdfsd<br>
        sdfsdf sdf                   
     </div>
</div>

アラートは、トラブルシューティングのためだけに表示されます。

「G」をクリックするとトランジションがトリガーされますが、これは最初の newsItem に対してのみ機能します。後続のすべての newsItems は、「G」をクリックしても、その上の項目がすでに遷移していない限り、何もしません。

代わりに newsHeadline のクリックを監視すれば問題なく動作しますが、newsHeadline をクリックすると、代わりにその上の 1 つが遷移するか、クリック可能な部分を探し回る必要があるという問題につながります (そうではありません)。たとえば、見出しテキストをクリックしてください）。

シンプルなものが欠けているような気がします。何か案は？

4

1 に答える 1

0

クラスのすべてのインスタンスを選択するには、find を使用せず、単純にしてください。

$('.newsContent').[do something here, toggle, etc]
于 2012-12-14T23:17:04.040 に答える