Question

我在#article中有一个单独的页面，比如5个帖子。以下是用于切换hide / show：

的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个帖子都会展开。

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

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

<强> Check Fiddle

Answer 2

您需要找到同一content div中的div。

而不是找到类article的任何div。

所以它看起来像这样：

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

然后找到article div中具有content类的任何孩子：

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

在多个DIV中使用jquery显示/隐藏内容

2 个答案: