2017-01-30 8 views
1

Я пытаюсь создать navBar, который автоматически генерируется путем обращения к массиву объектов «Страница». К сожалению, я, кажется, падаю в ловушку/закрытую ловушку. Я прочитал несколько потоков, связанных с этим, и в некоторых случаях копировал и вставлял код решения и передавался в моих собственных переменных, но я изо всех сил стараюсь, чтобы он корректно назначал onclicks.Закрытие в циклах с привязкой Onclick

Я знаю, что я рядом. В приведенном ниже коде есть два варианта, которые я попробовал.

Я получаю что-то неправильно с пареметром в скобках в функции самозапуска? -() (divId)? Я не очень понимаю эту часть.

Могу ли я также бороться, потому что это делается как метод объекта?

Любая помощь очень ценится, но у меня все в порядке, я изучаю все это в свое свободное время! ;)

Заранее спасибо.

РЕДАКТИРОВАТЬ: Jsfiddle: https://jsfiddle.net/mcgettrm/fs0mtz6n/

var navBar = { 
display: function(){ 
    for(i=0;i<pages.length;i++){ 
     document.getElementById('navBar').innerHTML += pages[i].token; 
     var divId = pages[i].unique; 

// code works fine up to here. 
// option one(below): when navBar.display() is called the following code only adds 
// the onclick to the final navbar link 

     document.getElementById(divId).onclick=(function(divId) { 
       return function() { 
       alert(divId); 
      }; 
     })(divId); 

//option two(below): when navBar.display() is called the following code logs 
// the individual div id's correctly. But, it does it without being clicked. Then, 
// only the last item in the loop is clickable. 

     (function(divId){ 
       document.getElementById(divId).onclick= function(){ 
        console.log(divId); 
       } 
      } 
     )(divId); 
    } 
} 

};

+0

Интересная проблема. Я пробовал различные варианты IIFE, и каждый раз только последнему элементу присваивается обработчик onclick. – abhishekkannojia

+0

Спасибо, что так много за ваш комментарий. Я потратил много времени на это. На самом деле очень полезно просто знать, что это не только я. Иногда, когда вы освещаете новую землю, может быть трудно понять, просто ли вы глупы! –

ответ

1

У меня здесь есть работа - https://jsfiddle.net/pqu9kr85/ это не связано с привязкой i к тому, что вам нужно было сначала создать навигационный html, убедившись, что он был в DOM, прежде чем связывать мероприятие. Я помещаю два отдельных цикла, один для создания навигатора, второй - для привязки событий. Также обновлен page.display(), чтобы использовать this, так как на это будет влиять значение i.