JQUERY.Каждый внутри в модуле JS

Question

Как бы вставить данные-вал якоря, который был нажат, используя .each внутри функции scrollMove? Поскольку он работает сейчас, он всегда будет вставлять данные-val первого файла привязки в html. Я хотел бы выполнить это с минимальной разметкой js в этом формате.

(function() { \t \t \t \t \t \t \t 
 

 
    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(); 
 

 
})();

<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>

Answer 1

Как я уже сказал в комментарии, метод bindEvents является обязательным функцию в текущем объекте на событие щелчка. Но вам нужен элемент, в котором событие произошло в функции щелчка. Вот что вы можете сделать:

$(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 для вызова обработчика событий. Кроме того, он передает элемент, в котором событие произошло в обработчике кликов.

Видимо, это обходное решение. Не могу теперь думать о более чистом решении.