javascript - JS - 为对象中的每个 Dom 元素分配一个值

Question

我正在尝试将一些 CSS transfrom 属性分配给通过 QuerySelectorAll 选择的 Dom 元素。

每个需要分配的转换属性都存储在一个对象中，这个属性的键匹配独特的 CSS 选择器，

---

为了帮助理解，这是我要实现的冗余版本是:

  var   front = document.querySelector('.front'),
    back = document.querySelector('.back'),
    right = document.querySelector('.right'),
    left = document.querySelector('.left'),
    top = document.querySelector('.top'),
    bottom = document.querySelector('.bottom');
    // common parent class is
    boxFigure = document.querySelectorAll('.cube figure')

    front.style.transform= "rotateY(0deg) translateZ("+trans+"px)" ;
    back.style.transform= "rotateY(180deg) translateZ("+trans+"px)" ;
    left.style.transform= "rotateY(90deg) translateZ("+trans+"px)" ;
    right.style.transform= "rotateY(-90deg) translateZ("+trans+"px)" ;
    top.style.transform= "rotateX(90deg) translateZ("+trans+"px)" ;
    bottom.style.transform= "rotateX(-90deg) translateZ("+trans+"px)" ;

---

这是我到目前为止尝试过的:

var faces = {
front:"rotateY(0deg) translateZ("+trans+"px)",
back:"rotateY(180deg) translateZ("+trans+"px)" ,
left:"rotateY(90deg) translateZ("+trans+"px)" ,
right:"rotateY(-90deg) translateZ("+trans+"px)",
top:"rotateX(90deg) translateZ("+trans+"px)" ,
bottom:"rotateX(-90deg) translateZ("+trans+"px)"
};
 for (var i = 0; i < boxFigure.length; ++i){
     var side = this.className;    
    //I believe this to be wrong - elements are named like-> figure.front
     boxFigure[i].style.transform = faces[side]
};

我也试过

function faceTrans (e){
    var side = this.className;
    boxFigure.style.transform = faces[side];
}
[].slice.call(
    document.querySelectorAll('.cube figure')).forEach(function(el){
        el.addEventListener("DOMContentLoaded", faceTrans, false);
    } );

由于我是这个主题的新手，我可能会遗漏一些明显的东西......欢迎提出任何建议。

---

HTML 是

 <div class="cube">
            <figure class="front"> 1</figure>
            <figure class="back"> 3</figure>
            <figure class="left">2 </figure>
            <figure class="right">4 </figure>
            <figure class="top">5 </figure>
            <figure class="bottom">6 </figure>
    </div>

Answer 1

 for (var i = 0; i < boxFigure.length; ++i){
     var side = boxFigure[i].className;    
    //I believe this to be wrong - elements are named like-> figure.front
     boxFigure[i].style.transform = faces[side];
};

应该这样做。