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

【问题标题】：JS - Assign forEach Dom element a value in an objectJS - 为对象中的每个 Dom 元素分配一个值
【发布时间】：2015-03-17 14:25:07
【问题描述】：

我正在尝试将一些 CSS 转换属性分配给通过 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>

【问题讨论】：

什么是boxFigure？什么是基本标记？
这是包含figure.faces的父div，我正在更新html
我在完全理解您的代码概念时遇到了问题。我知道您要做什么，但不清楚。你有各种各样的元素。正面、背面等。你也有boxfigures。是否要将正面、背面等变换样式添加到 boxfigures 中？
基本上我正在构建一个立方体

标签： javascript css dom css-selectors

【解决方案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];
};

应该这样做。

【讨论】：

是的，但它会让你发疯。盲目地盯着它看了好几个小时。