javascript - .click（）は、クラスを持つ1つの要素にのみ影響します

Question

短い全文とニュース記事のタイトルを含むニュースのリストがあります。それをクリックすると、全体が表示され、その逆も同様です。ただし、最初の記事をクリックすると、他のすべての記事も展開されます。クリックしたものだけに影響を与えるにはどうすればよいですか？

次に例を示します。

$(document).ready(function () {
    $('.news-expand').click(function () {
        $(".news-content-short").toggle();
        $(".news-content-full").toggle();
        $('.news-date').toggleClass('active-date');
        $('.news-expand').toggleClass('active');
    });
});

score 5 · Accepted Answer

クリックしたセクションのアイテムのみを操作する必要があります。そのためのコードは次のようになります。

$(document)
    .ready(function () {
    $('.news-expand')
        .click(function () {
        var par = $(this).parents('.main-news-holder');
        par.find(".news-content-short").toggle();
        par.find(".news-content-full").toggle();
        par.find('.news-date').toggleClass('active-date');
        par.find('.news-expand').toggleClass('active');
        return false;
    });
});

このデモをチェックしてください: http://jsbin.com/ikijap/1/edit

score 4 · Accepted Answer

問題は、クリックイベントがクラスに基づいて呼び出されることではなく、クリックイベントでクラス内のすべてのアイテムに作用していることです。

代わりに、これを使用してください

クリックイベントの詳細については、JQuery の APIを参照してください。

score 3 · Accepted Answer

これは、常にセットのすべてのアイテムに取り組んでいるためです。したがって、たとえば$(".news-content-short").toggle();、必要なクラスだけでなく、すべてのアイテムを適切なクラスに切り替えます。

以下が機能するはずです。

$('.news-expand').click(function () {
      $parent = $(this).parents(".main-news-holder");
      $parent.find(".news-content-short,.news-content-short").toggle().end()
             .find('.news-date').toggleClass('active-date').end()
             .find('.news-expand').toggleClass('active');
});

あなたの例は働いています

score 0 · Accepted Answer

親 div にアクセスする必要があります。その後、正しい div を非表示/表示できます。ここで jsbin のデモを確認してください: http://jsbin.com/irihax/14/

$(document)
    .ready(function () {
    $('.news-expand')
        .click(function () {
          var mainDiv = $(this).parent().parent().parent();
        mainDiv.find(".news-content-short").toggle();
        mainDiv.find(".news-content-full").toggle();
        mainDiv.find('.news-date').toggleClass('active-date');
        mainDiv.find('.news-expand').toggleClass('active');
    });

});

score 0 · Accepted Answer

$(document)
    .ready(function () {
    $('.news-expand').click(function () {
        var parent = $(this).closest('.main-news-holder');
        $(this).toggleClass('active');
        parent.find(".news-content-short").toggle();
        parent.find(".news-content-full").toggle();
        parent.find('.news-date').toggleClass('active-date');
    });
});

score 0 · Accepted Answer

htmlコードを並べ替えることで、

<!DOCTYPE html>
<html>

    <head>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <meta charset=utf-8 />
        <title>JS Bin</title>
        <script>
$(document)
    .ready(function () {
    $('.news-header')
        .click(function () {
        $(this).children('div').toggle();
    });
});
        </script>
    </head>

    <body>
        <div id="main-news">
            <div class="main-news-holder">
                <div class="news-date">
                    <p>1 sep</p>
                </div>
                <div class="news-header" style="border:1px solid;">
                    <p><a class="news-expand" href="#">Show more</a></p>
                    <div class="news-content-short">
                    <p>short short short short short</p>
                    </div>
                    <div class="news-content-full" style="display: none;">
                        <p>text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text</p>
                    </div>
                </div>

            </div>
            <!-- ################################################################################################################################
            -->
            <div class="main-news-holder">
                <div class="news-date">
                    <p>2 sep</p>
                </div>
                <div class="news-header">
                    <p><a class="news-expand" href="#">Show more</a></p>
                    <div class="news-content-short">
                    <p>short short short short short</p>
                    </div>
                    <div class="news-content-full" style="display: none;">
                        <p>text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text</p>
                    </div>
                </div>

            </div>
    </body>

</html>

これが役立つことを願っています。

javascript - .click（）は、クラスを持つ1つの要素にのみ影響します

6 に答える 6

Related

Reference