Javascript - проблема добавления динамически

Question

Учитывая:

// Positions the bars relative to scale
    this.gDrawBars = function() {

        // Go through all the bars
        for (i = 0; i < this.gData.length; i++) {

            // Check part of it is within range
            if (this.gDisplayFrom < this.gData[i][2] || this.gDisplayTo > this.gData[i][1]) {
                // Is the entire bar showing
                var isEntireBarInRange = (this.gDisplayFrom < this.gData[i][2] && this.gDisplayTo > this.gData[i][1]);


                var div = document.createElement('div');
                div.id = "gBar" + i;
                div.className = 'gBar';
                div.innerHTML = this.gData[i][0];

                var self = this;
                div.onmouseover = function() {
                    gBarHighlight(this, this.gData[i][1], this.gData[i][2]);
                };
                div.onmouseout = function() {
                    gBarUnHighlight(this, this.gData[i][1], this.gData[i][2]);
                };


                this.gContainer.appendChild(div);


                //this.gContainer.innerHTML += "<div id=\"gBar" + i + "\" class=\"gBar\" onmouseover=\"gBarHighlight(this, '" + this.gData[i][1] + "', '" + this.gData[i][2] + "')\" onmouseout=\"gBarUnHighlight(this, '" + this.gData[i][1] + "', '" + this.gData[i][2] + "')\">" + this.gData[i][0] + "</div>";

Комментируемая строка внизу работает нормально, но я пытаюсь изменить ее, чтобы динамически добавлять эти функции.Он должен передать this.gData[i][1] в функции, но не может, потому что значение i не имеет значения вне цикла.

Как я могу обойти это?IE, заставьте функцию распознавать, что ей передается значение для использования, а не ссылка.

Answer 1

Вам необходимо сохранить значение i в новом контексте выполнения.

Поместите код, который назначает обработчики в именованную функцию, и вызовите его в цикле, передав в качестве аргумента i.

Поместите эту функцию перед for loop:

function setupMouseOverOut( el, i ){
    el.onmouseover = function() {
        gBarHighlight(this, this.gData[i][1], this.gData[i][2]);
    };
    el.onmouseout = function() {
        gBarUnHighlight(this, this.gData[i][1], this.gData[i][2]);
    };
 }

... затем вызовите его в цикле for:

setupMouseOverOut( div, i );

Таким образом, значение i, которое вы передали из цикла for, сохраняется в новом контексте выполнения вызова функции setupMouseOverOut(), и новые функции, которые вы устанавливаете как обработчики, будут ссылаться на эту локальную переменную .

Answer 2

Это не функция, это событие. Вам необходимо добавить его как событие к элементу:

div.addEventListener('mouseover', function() {
    // ...
});

Обратите внимание, что когда вы делаете это таким образом, у вас нет этого слова "вкл" там.