Question

如何在scrollMove函数中插入使用.each单击的锚点数据-val？因为它现在有效，它将始终在html中插入第一个锚点的data-val。我希望用这种格式的最小js标记来实现这一点。

＆＃13;

(function() {							

  var scroll = {
    init: function() {
      this.cacheDom();
      this.bindEvents();
      this.scrollMove();
    },
    cacheDom: function() {
      this.$el = $('header');
      this.$link = this.$el.find('li a');
    },
    bindEvents: function() {
      this.$link.on('click', this.scrollMove.bind(this));
    },
    scrollMove: function() {
      
      // insert data val of what was clicked
      $('html').append(this.$link.data('val'));
      
    }
  };

  scroll.init();

})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<header>
  <nav class="overlay-menu">
    <ul>
      <li id="home-link"><a href="javascript:void(0);" data-val="2200">Home</a></li>
      <li id="service-link"><a href="javascript:void(0);" data-val="4900">Service</a></li>
      <li id="about-link"><a href="javascript:void(0);" data-val="6400">About</a></li>
      <li id="contact-link"><a href="javascript:void(0);" data-val="8500">Contact</a></li>
    </ul>
  </nav>
</header>

<!-- test -->
<div id="html">Data-Val:</div>

＆＃13;

Answer 1

正如我在评论中所说，bindEvents方法将当前对象中的函数绑定到click事件。但是您需要在click函数中发生事件的元素。您可以这样做：

$(function(){
 var scroll = {
    init: function() {
      this.cacheDom();
      this.bindEvents();
      this.scrollMove(this.$link.eq(0));

    },
    cacheDom: function() {
      this.$el = $('header');
      this.$link = this.$el.find('li a');
    },
    bindEvents: function() {
      that = this;
      this.$link.on('click', function(){
        that.scrollMove($(this));
      });
    },
    scrollMove: function(elemObj) {
      // insert data val of what was clicked
      $('#html').append(elemObj.data('val'));
    }
  };

  scroll.init();

});

基本上，bindEvents存储this的值来调用事件处理程序。此外，它将发生事件的元素传递给单击处理程序。

显然，这是一种解决方法。现在不能想出更清洁的解决方案。

JQUERY.Each里面的JS模块

1 个答案: