我正在构建一个图像 slider ,但我遇到了一些事件处理程序和范围的问题。
像这样简单的 HTML 设置:
<section>
<div class="container">
<div class="closer-look-slider">
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
<li class="four"></li>
</ul>
</div>
<div class="clear"></div>
<div id="closer-look-slider-nav">
<button data-dir="left">left</button>
<button data-dir="right">right</button>
</div>
</div>
<div class="clear"></div>
<div id="closer-look-slider-thumbs">
<a href="javascript:void(0);" class="active">1</a>
<a href="javascript:void(0);">2</a>
<a href="javascript:void(0);">3</a>
<a href="javascript:void(0);">4</a>
</div>
</section>
在我的代码中,我有事件处理程序来检查导航按钮何时被单击,并在单击时触发相关功能。如果我有一个 slider ,这一切都可以正常工作,但是一旦我向页面添加另一个 slider ,它就会开始变得困惑。
点击事件的代码如下:
slider.prototype.trigger_events = function () {
_self = this;
this.nav.on('click', function () {
_self.set_slide_pos(jQuery(this).data('dir'));
_self.transition();
console.log(_self.nav);
});
this.thumbs_elem.on('click', function () {
_self.pagination_index(jQuery(this));
console.log(_self.thumbs_elem);
});
};
例如,如果我在页面上有两个 slider (完全相同的标记),那么两组按钮控制第二个 slider ,而不是与被单击的按钮对应的 slider 。
我试了一下,我猜这与范围有关?这是我在进行控制台日志记录时得到的结果。
slider.prototype.trigger_events = function () {
console.log(this.nav) // returns both navigation items
this.nav.on('click', function () {
console.log(_self.nav) // always returns the second nav and not the one that was clicked
});
};
显然这给我带来了问题,因为无论我点击哪个导航,它总是控制第二个。
最佳答案
您的_self
变量是implicitly global !通过在其前面加上 var
使其成为每个 trigger_events
调用的本地(是的,这是一个范围问题)。
关于Javascript 作用域和点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24911982/