使用CSS选择器作为javascript的输入

Question

到目前为止，我在一个DOM元素上使用了不同的按钮进行不同的转换（每个按钮都有各自的功能）：

onButtonClickUp = function(){
    document.querySelector('.cube-rot').style.transform="rotateY(90deg)"
    };
onButtonClickDown = function(){
    document.querySelector('.cube-rot').style.transform="rotateY(-90deg)"
};
onButtonClickRight = function(){
    document.querySelector('.cube-rot').style.transform="rotateX(90deg)"
};
onButtonClickLeft = function(){
    document.querySelector('.cube-rot').style.transform="rotateX(-90deg)"
};
document.querySelector('.show-up').addEventListener( 'click', onButtonClickUp, false);
document.querySelector('.show-down').addEventListener( 'click', onButtonClickDown, false);
document.querySelector('.show-left').addEventListener( 'click', onButtonClickLeft, false);
document.querySelector('.show-right').addEventListener( 'click', onButtonClickRight, false);

我将DomContentLoaded上的所有内容解雇了，并且可以正常工作，但是我想将这些功能组合为不同情况的一个。

---

这就是我尝试过的

 function onButtonClick(rot){
    //rot = rUp || rDown|| rLeft ||rRight ;
    if(rot == 'rUp'){rot = "rotateY(90deg)";}
    else if (rot == 'rDown'){ rot = "rotateY(90deg)"}
    else if (rot == 'rLeft'){ rot = "rotateX(90deg)"}
    else if(rot == 'rRight' ){ rot = "rotateX(-90deg)"};

    cubeRot.style.transform=rot
    };


 document.querySelector('.show-up').addEventListener( 'click', onButtonClick('rUp'), false);
 document.querySelector('.show-down').addEventListener( 'click', onButtonClick('rDown'), false);
 document.querySelector('.show-right').addEventListener( 'click', onButtonClick('rRight'), false);
 document.querySelector('.show-left').addEventListener( 'click', onButtonClick('rLeft'), false);

它不起作用，添加不同的EventListners可以解决上一个覆盖的上一个问题。最方便的方法是什么？

Answer 1

由于在进行事件绑定时正在调用onButtonClick() ，因此它需要返回一个函数。

function onButtonClick(rot){
    return function(e) {
        //rot = rUp || rDown|| rLeft ||rRight ;
        if(rot == 'rUp'){rot = "rotateY(90deg)";}
        else if (rot == 'rDown'){ rot = "rotateY(-90deg)"}
        else if (rot == 'rLeft'){ rot = "rotateX(90deg)"}
        else if(rot == 'rRight' ){ rot = "rotateX(-90deg)"};

        cubeRot.style.transform=rot;
    };
}

或者，将函数保留.bind()并使用.bind() ：

document.querySelector('.show-up').addEventListener('click', onButtonClick.bind(null, 'rUp'), false);
document.querySelector('.show-down').addEventListener('click', onButtonClick.bind(null, 'rDown'), false);
document.querySelector('.show-right').addEventListener('click', onButtonClick.bind(null, 'rRight'), false);
document.querySelector('.show-left').addEventListener('click', onButtonClick.bind(null, 'rLeft'), false);

以上解决方案应该使您畅通无阻。 但是，您可以考虑进行更多代码改进。

不用那么长的if .. else if块，您可以将值存储在对象中并通过键查找值：

var rotations = {
    rUp: "rotateY(90deg)",
    rDown: "rotateY(-90deg)",
    rLeft: "rotateX(90deg)",
    rRight: "rotateX(-90deg)"
};
function onButtonClick(rot) {
    cubeRot.style.transform = rotations[rot];
}

您的事件处理程序可以通过this访问clicked元素。 您不需要传递rot参数，只需查看this.className ：

var rotations = {
    up: "rotateY(90deg)",
    down: "rotateY(-90deg)",
    left: "rotateX(90deg)",
    right: "rotateX(-90deg)"
};
function onButtonClick(e) {
    var rot = this.className.slice(5);
    cubeRot.style.transform = rotations[rot];
}
[].slice.call(document.querySelectorAll("[class^='show-']")).forEach(function(el) {
    el.addEventListener("click", onButtonClick, false);
});

Answer 2

假设您的按钮是纯HTML按钮，没有innerHTML，则可以执行此操作

<input type="button" action-type="rUp" value="Show up" class="show-up" />

这会将具有所需动作变量的属性添加到输入。

function onButtonClick(e){
    var rot = e.target.getAttribute("action-type");
    if(rot == 'rUp'){rot = "rotateY(90deg)";}
    else if (rot == 'rDown'){ rot = "rotateY(90deg)"}
    else if (rot == 'rLeft'){ rot = "rotateX(90deg)"}
    else if(rot == 'rRight' ){ rot = "rotateX(-90deg)"};

    cubeRot.style.transform=rot;
    };


 document.querySelector('.show-up').addEventListener( 'click', onButtonClick, false);
 document.querySelector('.show-down').addEventListener( 'click', onButtonClick, false);
 document.querySelector('.show-right').addEventListener( 'click', onButtonClick, false);
 document.querySelector('.show-left').addEventListener( 'click', onButtonClick, false);

触发事件时， e.target指触发事件的元素（按钮）。 rot存储属性action-type 。 基于rot将采取正确的措施。 好处是不需要创建新函数或将函数包装在绑定中。

Answer 3

您可以使用此对象来引用触发事件的按钮：

  var onButtonClick = function () {
    var button = this;
    document.querySelector('.dir').innerHTML = button.name;
    switch(button.name) {
       case 'up': alert('up'); break;
       case 'down': alert('down'); break;
       case 'left': alert('left'); break;
       case 'right': alert('right'); break;
     }
  };

  document.querySelector('.show-up').addEventListener('click', onButtonClick, false);
  document.querySelector('.show-down').addEventListener('click', onButtonClick, false);
  document.querySelector('.show-left').addEventListener('click', onButtonClick, false);
  document.querySelector('.show-right').addEventListener('click', onButtonClick, false);

检查这个小东西： http : //plnkr.co/edit/MJzMffnDZJripzXkiZzc

编码愉快！