0

我有一个页面，比如 5 个帖子，全部在#article. 以下是用于切换隐藏/显示的 jQuery 代码：

$(".click-show-more").click(function () {
    if($(".content").hasClass("show-more")) {
        $(this).text("(Show Less)");
    } else {
        $(this).text("(Show More)");
    }
    $(".content").toggleClass("show-more");
});

HTML结构是：

<div class="article">
    <div class="content show-more">Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. 

Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.
    </div>
    <div class="click-show-more">(Show More)</div>
</div>

现在，我有上面的结构，在一个页面上 5-6 次，每当我点击时Show More，所有 5-6 个帖子都会展开。

如何修改我的代码以仅扩展该特定帖子？

4

2 回答 2

1

更改此行

$(".content").hasClass("show-more")

至

$(this).closest('.article').find('.content').hasClass("show-more")

您的点击应该只影响content特定文章的。因此，利用this上下文对您有利。

还有这条线

$(".content").toggleClass("show-more");

应该

$(this).closest('.article').find('.content').toggle();

除非.show-more { display: none }已经定义。

代码

$(".click-show-more").click(function () {
    var $closestContent = $(this).closest('.article').find('.content');

    if($closestContent.hasClass("show-more")) {
        $(this).text("(Show Less)");
    } else {
        $(this).text("(Show More)");
    }
    $closestContent.toggleClass('show-more');
});

检查小提琴

于 2013-06-20T23:13:55.640 回答
0

content您需要在同一个 div 中找到一个，而不是找到任何带有 class的articlediv。

所以它看起来像这样：

$(".click-show-more").click(function () {
    var content = $(this).closest('.article').find('.content');
    if(content.hasClass("show-more")) {
        $(this).text("(Show Less)");
    } else {
        $(this).text("(Show More)");
    }
    content.toggleClass("show-more");
});

实际发生的是我们正在获取被点击的 div：

$(this)

查找最近的具有该类的父article级：

$(this).closest('.article')

然后找到该articlediv 的任何具有content该类的孩子：

$(this).closest('.article').find('.content')
于 2013-06-20T23:15:59.817 回答