相同类的jQuery选择器

Question

我在div里面有几个OffersContainerdiv.在页面加载时,我只显示第一个div OffersContainer.然后点击"显示更多",我会显示前三个div,最后点击"显示更多",第二次显示所有div.

问题是我一次有两个OffersContainer.我希望这两个OffersContainerdiv彼此独立.实际发生的是,当我第一次点击左边OffersContainer's显示更多它表现得很完美,即显示3个div.但现在当我点击显示更多右侧的OfferContainer的div时,它将显示所有而不是显示前3个div.这意味着它不能独立于其他div工作？如何让它单独运行？

PS:由于某种原因,这两个div都有相同的类,OffersContainer所以我无法更改名称.我究竟做错了什么？我使用了错误的选择器吗？

这是小提琴

以下是仅有一个OffersContainer div的小提琴,以防万一有人想看

Answer 1

不要将点击信息存储在共享全局变量中。相反，您可以将其保留在每个跨度的类名称中：

$(".OffersContainer > div:gt(0)").hide();

$(".OffersContainer > span").click(function() {
    $(this).siblings($(this).hasClass('click') ? "div:gt(0)" : "div:lt(3)").slideDown();
    $(this).addClass('click');
});

演示： https: //jsfiddle.net/qo55rmuy/2/