Функция .setAttribute, используемая для установки поворота для ряда клонированных объектов

Question

Я несколько раз клонировал сущность, и теперь мне нужно применить ротацию к каждой. Вращение для каждого из них отличается и хранится в массиве. Как я могу назначить эти вращения?

window.onload=function(){


rollRot = document.getElementById("roller-rotation");
rollEl = document.getElementById("roller");
rollCen = document.getElementById("roller-center");
var nElements = 6;
var degSep = 360/nElements;
var rollers = new Array(nElements);
var degRot = 0;

//creat array with rotation data then clone rollerRot
for(var i = 0; i < nElements; i++){

rollers[i] = [{rotation: "0, " + degRot + ", 0"}];

degRot = degRot + degSep;
console.log(degRot);

rollCen.appendChild(rollRot.cloneNode(true));
};
console.log(rollers);
console.log(degSep);
;


//configure rotation

        var rollerNodes = document.querySelectorAll("#roller- 
rotation");
        console.log(rollerNodes);
        rollers.forEach(function(rollersData, index) {
            var rollerItem = rollerNodes[index];

            rollerItem.setAttribute("visible", true);
            rollerItem.setAttribute("rotation:", 
rollersData.rotation); //<----------------
            console.log(rollerItem);
});




}

Я ожидаю, что вращение клонированных объектов будет прогрессировать, например, (0, 0, 0) (0, 60, 0) (0 120 0) и т. Д.,

Вместо этого они все всегда (0, 0, 0)

Answer 1

С таким синтаксисом:

rollers[i] = [{rotation: "0, " + degRot + ", 0"}];

Вы создаете массив с объектом на 0 внутри массива rollers. Чтобы получить к нему доступ, нужно сделать

rollers.forEach(function(rollersData, index) {
// ...   
//        rollers item
//       \/         
rollersData[0].rotation
//          /\
//          the inner array with the rotation object

вроде так:

rollerItem.setAttribute("rotation", rollersData[0].rotation)

---

Если это преднамеренно, и вы планируете добавить туда позицию или что-то вроде ее штрафа, в противном случае потеряйте скобки [], чтобы использовать ее следующим образом rollersData.rotation.

скрипка здесь .