我已经为我的网站制作了一个简单的轮播,我想将其带到下一步。我希望在一个页面上有多个轮播,并且只需调用 $('.carousel').swapify()
即可完成。
这是我迄今为止所拥有的:
$.fn.swapify = function() {
var $this = $(this);
console.log('this is currently: ' + this.selector);
function advanceSlide() {
$('.swapify li:first-child').appendTo('.swapify');
}
$(this).find('li').click(function() { advanceSlide(); });
}
$(document).ready(function () {
$('.carousel').swapify();
});
当我与旋转木马互动时,它们都会前进。这是非常明显的,但我不确定如何使交互具体化。我尝试过类似的方法:
$('li:first-child', this).appendTo(this);
我仍在开发我的 JavaScript 词汇,事实证明很难通过 Google 进行搜索。
编辑:我设置了一个 fiddle 来说明这个问题 http://jsfiddle.net/69FM7/1/
最佳答案
IMSoP 的答案可能就是您想要的,但另一个选择是使用委托(delegate)事件:
$.fn.swapify = (function() {
function advanceSlide(e) {
var $carousel = $(e.delegateTarget);
$carousel.find('li:first-child').appendTo($carousel);
}
return function swapify() {
this.on("click", "li", advanceSlide);
};
}());
<小时/>
以下是一些关键概念的快速解释:
Immediately Invoked Function Expressions
IIFE 为您提供了一种为新变量和函数创建稳定的新作用域的方法。我们创建一个函数并立即调用它。
(function() { // new scope here }());
我们在这里使用一个为
advanceSlide
和swapify
函数的单个实例创建一个新的作用域。-
IIFE 的返回值是
swapify
函数。这个函数是一个闭包——它关闭自由变量advanceSlide
。 “自由”是指变量advanceSlide
在从函数返回时与swapify
一起“转义”——它可以自由地存在于其包含范围之外。 $.fn
是 jQuery 的prototype
object 的别名。 。简而言之,这意味着 jQuery object 的所有实例将有权访问原型(prototype)定义的函数。为了清楚起见,
$("someselector")
将返回 jQuery object 。我们将 IIFE 的返回值分配给$.fn.swapify
,这将为 jQuery 对象注入(inject)我们的新功能。-
当我们调用
swapify
帮助器时,而不是在每个li
上绑定(bind)事件 - 这就是.find("li").on(.. .)
就可以了——最好在父元素上绑定(bind)事件。 然后让 jQuery 动态检查事件的目标
是否与我们关心的集合匹配。例如,您可能只有少数
ul
元素,但其中每个元素可能包含数百个li
元素。我们不需要创建一个处理程序并在每个处理程序上附加一个事件,只需在父级上附加一个处理程序即可。这可以最大限度地减少需要绑定(bind)的事件处理程序的数量。 使用
delegatedTarget
property来自event object最后,当我们的事件处理程序被调用时,它将被传递一个 event object 。这将有几个有用的属性,例如
target
、currentTarget
和delegateTarget
。我们使用delegateTarget
来查找我们最初绑定(bind)到的根元素,并将其分配给$this
。然后,其余的逻辑就会按照您期望的方式工作。
关于jquery - 编写第一个 jQuery 插件 : understanding this,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21507104/