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');
    });
});

Answer 1

您只需要对您单击的部分中的项目执行操作。代码就像：

$(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

Answer 2

问题不在于您的点击事件是基于类调用的，而是在您的点击事件中，您正在对班级中的每个项目进行操作。

相反，请使用this

有关点击事件的详细信息，请参阅JQuery's API

Answer 3

这是因为您始终处理该集的所有项。所以例如$(".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');
});

<强> Your example working

Answer 4

$(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');
    });
});

Answer 5

你需要到达父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');
    });

});

Answer 6

通过重新排列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>

希望这会有所帮助。

.click（）只影响一个带有类的元素

6 个答案: