相同类的jQuery选择器

前端之家收集整理的这篇文章主要介绍了相同类的jQuery选择器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在OffersContainer div中有几个div.在页面加载中,我只显示了OffersContainer的第一个div.然后在点击“显示更多”时,我会显示前三个div,最后点击“显示更多”,第二次显示所有div.

问题是我一次有两个OffersContainer.我希望这两个OffersContainer div彼此独立.实际发生的是,当我第一次点击左边的OffersContainer的节目时,它表现得更完美,即显示3个div.但现在当我点击显示更多右侧的OfferContainer的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

解决方法

不要将点击信息存储在共享的全局变量中.相反,您可以将其保留在每个范围的类名中:
$(".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/

原文链接:https://www.f2er.com/jquery/177452.html

猜你在找的jQuery相关文章