使用 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 在最后一个重写的 previous.. 最方便的方法是什么？

Answer 1

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

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():

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 访问被点击的元素。你不需要传递 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 按钮，没有内部按钮HTML，您可以这样做

<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

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

  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

编码愉快！

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

Using css selectors as inputs for javascript

html

javascript

css

listener