相同类的 jQuery 选择器

Question

我在 OffersContainer div 中有几个 div。在页面加载时，我仅显示 OffersContainer 的第一个 div。然后，在单击“显示更多”时，我显示前三个 div，最后第二次单击“显示更多”时，我显示所有 div。

问题是我一次有两个 OffersContainer。我希望这两个 OffersContainer div 彼此独立。实际发生的情况是，当我第一次单击左侧 OffersContainer's 显示更多时，它表现得非常完美，即显示 3 个 div。但现在，当我单击显示更多右侧 OffersContainer 的 div 时，它将显示全部内容，而不是显示前 3 个 div。这意味着它不能独立于其他 div 工作？如何让它单独运行？

P.S:出于某种原因，这两个 div 将具有相同的类 OffersContainer，因此我无法更改名称。我究竟做错了什么？我使用了错误的选择器吗？

Here is the Fiddle

And Here is the Fiddle with just one OffersContainer div just in case anyone wants to see

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/