jQuery 相同 类 的选择器

Question

我在 OffersContainer div 中有几个 div。在页面加载时，我只显示 OffersContainer 的第一个 div。然后单击 'show more'，我显示前三个 div，最后在第二次单击 'show more' 时，我显示所有 div。

问题是我一次有两个 OffersContainer。而且我希望这两个 OffersContainer div 相互独立。实际发生的是，当我第一次点击左 OffersContainer's show more 时，它​​表现得非常完美，即显示 3 divs。但是现在，当我单击显示更多右侧 OffersContainer 的 div 时，它将显示全部，而不是显示前 3 个 div。这意味着它不能独立于其他 div 工作？怎么才能分开运行？

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

Here is the Fiddle

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

Answer 1

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

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

Answer 2

您可以使用 CSS 在初始加载时隐藏相关的 div 元素。这将解决其他 .OfferContainer 元素的内容被完全隐藏的问题。

.OffersContainer > div:nth-child(n+2) {
    display: none;
}

从那里您可以更改逻辑，使其以可见元素的数量为关键字，而不是 click 变量，如下所示：

$(".OffersContainer > span").click(function() {
    var $siblings = $(this).siblings();
    var visibleLength = $siblings.filter(':visible').length;
    $siblings.filter(visibleLength != 1 ? "div:gt(0)" : "div:lt(3)").slideDown();
});

Updated fiddle

Answer 3

那是因为当你点击右边的 "show more" 时，var click 为真。您可以将点击属性存储在 jQuery.data

$(".OffersContainer > span").click(function(){
    var click = $.data(this, "click") || false;
    $(this).siblings(click ? "div:gt(0)" : "div:lt(3)").slideDown(); 
    $.data(this, "click", true);
});

Demo