Javascript作用域和单击事件

我正在构建一个图像滑块，在事件处理程序和范围方面遇到了一些问题

简单的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 () {
    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
    });
};

---

显然，这给我带来了问题，因为无论我单击哪个导航，它都会控制第二个导航。

您的

\u self

变量是！在每个

trigger\u events

调用前加上前缀（是的，这是一个范围问题），使其成为本地的。

您的

\u self

是<代码>\u self=this=>

var\u self=this太简单了！谢谢你的帮助，只要我能接受你的回答
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
    });
};