JavaScript范围和点击事件

woolm110 发表于 Dev

羊毛110

我正在构建图像滑块，并且遇到了事件处理程序和范围的一些问题。

简单的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.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（是，这是一个范围问题），使它在每个调用中都位于本地。