.addEventListener нарушает код после добавления в качестве цикла for для применения к различным элементам

Question 1

В настоящее время я работаю с этим кодом:

var hexArray = ["hexa", "hexb", "hexc", "hexd", "hexe", "hexf", "hexg", "hexh", "hexi", "hexj", "hexk", "hexl", "hexm"];
var burnArray = ["burna", "burnb", "burnc", "burnd", "burne", "burnf", "burng", "burnh", "burni", "burnj", "burnk", "burnl", "burnm"];

function zip(a, b, f) {
    for(var i=0; i < hexArray.length; i++){
        f(a[i], b[i]);
    };
}

inita = function () {
    document.getElementById('hexa').className='wave';
};
initb = function () {
    document.getElementById('hexb').className='wave';
};

etc...

document.getElementById('hexa').addEventListener('animationend', inita, false);
document.getElementById('hexa').addEventListener('webkitAnimationEnd', inita, false);
document.getElementById('hexb').addEventListener('animationend', initb, false);
document.getElementById('hexb').addEventListener('webkitAnimationEnd', initb, false);
document.getElementById('hexc').addEventListener('animationend', initc, false);
document.getElementById('hexc').addEventListener('webkitAnimationEnd', initc, false);
document.getElementById('hexd').addEventListener('animationend', initd, false);
document.getElementById('hexd').addEventListener('webkitAnimationEnd', initd, false);

etc...

zip(hexArray, burnArray, function(x, y) { 
    document.getElementById(x).className = 'transtart ' + y;
});

И это прекрасно работает. Но чтобы сократить свой код, я пытаюсь сделать это:

var hexArray = ["hexa", "hexb", "hexc", "hexd", "hexe", "hexf", "hexg", "hexh", "hexi", "hexj", "hexk", "hexl", "hexm"];
var burnArray = ["burna", "burnb", "burnc", "burnd", "burne", "burnf", "burng", "burnh", "burni", "burnj", "burnk", "burnl", "burnm"];
var initArray = ["inita", "initb", "initc", "initd", "inite", "initf", "initg", "inith", "initi", "initj", "initk", "initl", "initm"];

function zip(a, b, f) {
    for(var i=0; i < hexArray.length; i++){
        f(a[i], b[i]);
    };
}

inita = function () {
    document.getElementById('hexa').className='wave';
};
initb = function () {
    document.getElementById('hexb').className='wave';
};

etc ...

zip(hexArray, initArray, function(x, y){
    document.getElementById(x).addEventListener('animationend', y, false);
    document.getElementById(x).addEventListener('webkitAnimationEnd', y, false);
});

zip(hexArray, burnArray, function(x, y) { 
    document.getElementById(x).className = 'transtart ' + y;
});

И теперь zip-функция burnArray не выводит результат правильно и никогда не запускает CSS-анимацию, которую я для нее установил. Есть ли причина, по которой .addEventListener не может быть установлен как цикл For? Это как-то связано с переменными, которые я использую? Любая помощь будет принята с благодарностью.

javascript arrays

0

JSArrakis 18 Фев 2014 в 21:15

Answer

Как и в вашем исправленном коде в

zip(hexArray, initArray, function(x, y){
    document.getElementById(x).addEventListener('animationend', y, false);
    document.getElementById(x).addEventListener('webkitAnimationEnd', y, false);
});

Y - это строка, а не переменная.

Однако вы хотите, чтобы y был функциональным объектом

Поместите следующее после того, как вы установили inita, initb и т. д., отметив, что нет кавычек "

var initArray = [inita, initb, initc, initd, inite, initf, initg, inith, initi, initj, initk, initl, initm];

Т.е.

inita = function () {
    document.getElementById('hexa').className='wave';
};
initb = function () {
    document.getElementById('hexb').className='wave';
};

etc ...

var initArray = [inita, initb, initc, initd, inite, initf, initg, inith, initi, initj, initk, initl, initm];

0

jing3142 18 Фев 2014 в 21:40

О чувак. Всегда ли это такая глупая оплошность? Большое тебе спасибо!

–

JSArrakis

18 Фев 2014 в 21:49

Да, это так - однажды я провел два часа, ломая голову над тем, что код не работает и не заметил, что я нажал i, а не 1 в одном разделе.

–

jing3142

18 Фев 2014 в 21:58

Question 2