Javascript作用域和点击事件
Javascript scope and click events
我正在构建一个图像滑块,我遇到了一些事件处理程序和范围的问题。
简单的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>
在我的代码中,我有事件处理程序来检查导航按钮何时被单击,并在这样做时,它会触发相关函数。如果我有一个滑动条,这一切都很好,但一旦我在页面上添加另一个滑动条,它就开始变得混乱了。
下面是click事件的代码: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.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
变量是隐式全局的!
trigger_events
呼叫前加上var
使其成为本地呼叫(是的,这是一个范围问题)。
相关文章:
- 将作用域绑定到事件处理程序,但保留原始参数
- 直接在DOM事件处理程序中调用作用域函数的最短方法是什么
- 作用域和将参数传递给动态创建的事件处理程序时出现问题
- jQuery 解绑在作用域中声明的事件
- 如何从事件处理程序调用 AngularJS 作用域定义的函数
- 订阅子作用域上的事件,并在broadcastemit中返回回调
- Angular.js-视图不't在resize事件中更改作用域变量时更新
- javascript:如何更改"这个“;事件的作用域
- AngularJS事件,在应用所有作用域后触发
- JavaScript事件处理程序作用域
- 变量作用域和事件处理程序
- HTML5 drop事件具有不同的e.target作用域
- Javascript作用域问题:函数在$(doc).ready()中可用,但在事件处理程序中不可用
- Javascript事件处理程序在其作用域之外使用变量的问题
- JQuery事件之外的变量作用域
- 如何知道函数作用域上的JavaScript事件源
- Javascript作用域和点击事件
- JavaScript事件回调函数的作用域问题
- 事件处理程序函数超出了for的作用域
- Javascript对象与jQuery事件作用域的问题