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

你的问题是你的功能不起作用，因为你没有分配它只是用windows.onload检查它为什么你使用==。这是一个继电器错误你应该使用{{1} } {而不是=您知道==用于检查未分配，因此您必须使用==

Answer 2

// 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);
}

在循环中向元素添加类

2 个答案: