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

I've got the list of news, with short and full text, and a title of the news article. Clicking on it expands full view and vise versa. Yet clicking on first article also expands all other articles. How do I only affect the one I clicked?

我有新闻列表，包括短文和全文，以及新闻文章的标题。单击它可以扩展完整视图，反之亦然。然而，点击第一篇文章也会扩展所有其他文章。我如何只影响我点击的那个？

Here's the example:

这是一个例子：

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

6 个解决方案

#1

You need to act on only the items in the section you clicked. The code for that would be like:

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

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

Check this demo: http://jsbin.com/ikijap/1/edit

查看此演示：http：//jsbin.com/ikijap/1/edit

#2

You're problem is not that your click event is called based on class, but that in your click event you're acting on every item in the class.

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

Instead, use this

相反，使用它

For more details on the click event, see JQuery's API

有关click事件的更多详细信息，请参阅JQuery的API

#3

This is because you are always working on all items of the set. So e.g. $(".news-content-short").toggle(); toggles all items with the according class and not only the one you want.

这是因为您始终在处理集合中的所有项目。所以例如$（“新闻内容短。”）切换（）。用相应的班级切换所有项目，而不仅仅是你想要的项目。

The following should work:

以下应该有效：

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

你的例子工作

#4

You will need to get to the parent div and after that you can hide/show the correct divs. Check the jsbin demo here: http://jsbin.com/irihax/14/

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

});

#5

By rearrange the html code,

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

Hope this will help.

希望这会有所帮助。

#6

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

#1