將類添加到循環中的元素

Question

我試圖想出一個元素輪播的想法，通過更改類來單擊按鈕後會發生變化，但代碼不想運行。這是我登陸的地方：

var actionNeeded; 
var option; 

function $(id){ 
    return document.getElementById(id); 
} 

function slideChanger(option){ 
    var slides = [0, 1, 2, 3]; 

    switch(option) { 
     case 1: actionNeeded = 'nextSlide'; 
     case 2: actionNeeded = 'prevSlide'; 
    } 

    for (var i = 0; i < slides.length; i++){ 
     $('slide-' + i).setAttribute('class', actionNeeded); 
    } 
} 

window.onload == function(){ 
    $('nextArr').addEventListener('click', slideChanger(2), false); 
    $('prevArr').addEventListener('click', slideChanger(1), false); 
} 

問題在哪？

Answer 1

// var option removed, is not needed 
// var actionNeeded moved into function slideChanger, only needed there 

function $(id){ 
    return document.getElementById(id); 
} 

function slideChanger(){ 
    var slides = [0, 1, 2, 3], actionNeeded; 

    // keyword 'this' refers to the element on which this function is called 
    // if #nextArr has called, 'this' is #nextArr, otherwise 'this' will be #prevArr 
    // so we look for the id-attribute of 'this' 
    if (this.id == 'nextArr') actionNeeded = 'prevSlide'; 
    else if (this.id == 'prevArr') actionNeeded = 'nextSlide'; 

    for (var i = 0; i < slides.length; i++){ 
     $('slide-' + i).setAttribute('class', actionNeeded); 
    } 
} 

// in the listener you have to **point to** your function by its name 
// if you set slideChanger(), you **execute** it and get only the result 
window.onload = function(){ 
    $('nextArr').addEventListener('click', slideChanger, false); 
    $('prevArr').addEventListener('click', slideChanger, false); 
} 

Answer 2

你的問題是，你的功能不工作，因爲你不指定它，你只是你爲什麼要使用==。那是一箇中繼嚴重的錯誤，你應該使用的=代替==你知道，與windows.onload檢查它==是檢查不分配，所以你必須使用=

window.onload = function(){ 
    $('nextArr').addEventListener('click', slideChanger(2), false); 
    $('prevArr').addEventListener('click', slideChanger(1), false); 
}