javascript - 使函数分别作用于每个元素

Question

我正在创建一个 wordpress 元素，它将在轮播中显示帖子摘录。为了演示我在做什么，我创建了一个 github 存储库，其中包含轮播的 html 版本。

https://github.com/dingo-d/Post-Excerpt-Carousel

轮播大部分工作正常，但我有一个问题，我不明白它来自哪里。当我在页面上有一个轮播时，一切正常。但是，如果同一页面上有两个或更多怎么办？

发生的事情是，当您单击下一个图标时，您单击它的 slider 将向左移动，类将从一个元素切换到另一个列表项(事件类)，但这些类将移动在网站上的所有轮播上(repo 上有一个包含多个轮播的 html 文件)。

我创建了一个函数来管理移动和点击，我这样调用它:

$('.post_excerpt_carousel').each(function(){
    var $this = $(this);
    post_excerpt_positioning($this);
});

我已经这样做了，所以我也可以在调整大小时切换它。

我创建了一个 fiddle here但更容易查看存储库和下载示例文件夹(更好的可见性)。

如何防止类在所有轮播上切换，只在点击某个轮播时才切换？

编辑:Codepen 预览:http://codepen.io/dingo_d/pen/doNyMw

Answer 1

问题出在 main.js 的第 61 行:

var $a = $('.active');

您正在选择所有具有 .active 类的元素。

您只需将这一行替换为:

即可解决此问题

var $a = $('.active', $carousel);

这样，它将只选择 $carousel 中的 .active