Javascript dynamische Ereignis in für

Question

Ich habe ein wenig JavaScript-Code, die Schleife werfen in einer Liste, und erstellen Sie einen Schieberegler für jedes Element. Zweitens braucht es einen Event-Handler. Wenn also ein Schieberegler geändert wird, schreibt er den Wert in eine Eingabe.

Wenn die für Lauf zum ersten Mal, ist alles in Ordnung, bekommt die Eingänge die Werte, aber wenn ich manualy den Regler ändern, es einen Fehler aus:

Uncaught TypeError: Cannot read property 'maxValue' of undefined

Der Code:

for (i = 0; i < sliders.length; i++) 
{ 
    noUiSlider.create(sliders[i].object[0], { 
     start: sliders[i].start, 
     step: 1, 
     connect: true, 
     range: sliders[i].range 
    }); 
    sliders[i].object[0].noUiSlider.on('update', function(values, handle) { 
     if (handle) { 
      console.debug(sliders[i]); 
      sliders[i].maxValue.val(Math.floor(values[handle])); 
     } else { 
      sliders[i].minValue.val(Math.floor(values[handle])); 
     } 
    }); 
} 

In dem Schieber Variable i haben diese:

var sliders = [ 
      { 
       "object": $('#number-of-passangers'), 
       "start": [4, 6], 
       "range": { 
        "min": 2, 
        "max": 15 
       }, 
       "minValue": $("#min-passanger"), 
       "maxValue": $("#max-passanger") 
      }, 
      { 
       "object": $('#cost-per-day'), 
       "start": [3500, 65000], 
       "range": { 
        "min": 3500, 
        "max": 65000 
       }, 
       "minValue": $("#min-cost"), 
       "maxValue": $("#max-cost") 
      }, 
     ] 

Answer 1

das liegt daran, dass i t Der Index der Schleife, der NACH jeder Iteration inkrementiert wird. Vor dem Inkrement wird i < sliders.length ausgewertet und wenn es wahr ist, wird der Schleifenkörper ausgeführt. Das bedeutet, nachdem die Schleife i == sliders.length beendet ist, ist sliders[i] nicht definiert. i befindet sich im äußeren Bereich des Ereignishandlers, so dass der Wert für jeden Ereignishandler gleich ist. Sie müssen eine lokale Kopie davon speichern wie:

.on('click', (function (idx) { 
    return function (values, handle) { 
     /* use idx here, instead of i*/ 
    } 
})(i)); 

Zusammengefasst wird Ihr Problem durch den Bereich verursacht. Wenn man bedenkt:

function make() { 
    for (var i = 0, result = []; i < 10; i++) { 
     result.push(function fxi() { console.log(i); }); 
    } 
    return result; 
} 

make().forEach(function (fxi) { fxi() }) // logs 10 time »10« 

Das liegt daran, dass i im Rahmen der make() definiert ist und wenn eine der inneren Funktionen fxi aufgerufen wird, wird die Definition von i gesucht, die nicht in den Anwendungsbereich von fxi gefunden wird, so geht die Suche auf der nächsten Ebene weiter, make() Diesmal wird dort gefunden, also wird dessen Wert von dort übernommen. Aber da die Schleife i bis zu 10 während der Ausführung inkrementiert hat, ist ihr Wert jetzt 10 für jede fxi.

Fiddle