我在OffersContainer div中有几个div.在页面加载中,我只显示了OffersContainer的第一个div.然后在点击“显示更多”时,我会显示前三个div,最后点击“显示更多”,第二次显示所有div.
问题是我一次有两个OffersContainer.我希望这两个OffersContainer div彼此独立.实际发生的是,当我第一次点击左边的OffersContainer的节目时,它表现得更完美,即显示3个div.但现在当我点击显示更多右侧的OfferContainer的div时,它将显示所有而不是显示前3个div.这意味着它不能独立于其他div工作?如何让它单独运行?
P.S:由于某些原因,这两个div都有相同的类OffersContainer所以我不能更改名称.我究竟做错了什么?我使用了错误的选择器吗?
And Here is the Fiddle with just one OffersContainer div just in case anyone wants to see
解决方法
不要将点击信息存储在共享的全局变量中.相反,您可以将其保留在每个范围的类名中:
$(".OffersContainer > div:gt(0)").hide(); $(".OffersContainer > span").click(function() { $(this).siblings($(this).hasClass('click') ? "div:gt(0)" : "div:lt(3)").slideDown(); $(this).addClass('click'); });