jquery - Jquery:同じ名前の複数のクラスから1つのクラスを選択しますか?

Question

リスト形式でクリックした親要素から 1 つのクラスを選択する必要があります。その間ずっと、同じクラス名を持つ他のクラスが表示されないようにします。

たとえば、次のようになります。

$('ul').click(function() {
    $('li').next(".info").css({ "display" : "block" });
});

私が.info設定している間display:none;

そして、私のhtmlコードは次のとおりです。

<ul>
    <li><span>Guy</span></li>
    <li class="info">
        <p>This should pop up when I click on the "Guy" span.</p>
    </li>
</ul>

ただし、なぜ機能しない/発火しないのかわかりません。

どんな助けでも大歓迎です。

score 2 · Accepted Answer

基本的に、間違った要素をターゲットにしています。単に使用してください：

$('ul li').click(
    function(){
        $(this).next('li.info').show();
    });

元のコード$(this)では、ulクリックされたもの（クリックされた、またはまでのclickイベントバブル）があり、クラス名が。であるの次の兄弟を探します。lispanululinfo

私の修正は、clickイベントのターゲットを、のクラスliを持つ兄弟要素を持つ、にすることで機能しinfoます。

ちなみに、jQueryが機能しない場合はconsole.log($(this))、セレクターが一致していると思われるものと一致していることを確認するだけで便利です。

score 0 · Accepted Answer

イベントをスパン要素にバインドできます。

$(document).ready(function(){
    $('ul span').click(function() {
        // $('.info').hide()
        $(this).parent().next().show();
    });
})

2 に答える 2