.setAttribute 函数用于设置多个克隆实体的旋转

.setAttribute function being used to set rotation for a number of cloned entities

我已经多次克隆一个实体,现在我需要对每个实体应用旋转。每个人的旋转都是不同的,并存储在一个数组中。如何分配这些旋转?

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)

语法如下:

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

您正在创建一个数组,其中在 0 处的对象位于滚轮数组内。要访问它,您需要做

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.

fiddle here.