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

到目前为止，我在一个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);

我把所有的东西都放在我的电脑上， 但我想结合不同的情况，将函数组合成一个函数

---

这就是我尝试过的

 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会在上一次重写前一次中解析。。

---

执行此操作最方便的方法是什么？

因为您在执行事件绑定时调用了

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（）

：

上面的解决方案应该可以让您解除阻塞。但是，你可以考虑更多的代码改进。 而不是长的

if。。否则，如果

block，您可以将值存储在对象中，并通过键查找值：

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

您的事件处理程序可以通过

this

访问单击的元素。您不需要传递

rot

参数，只需查看

这个。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);
});

---

假设您的按钮是没有innerHTML的纯HTML按钮，您可以这样做

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

---

触发事件时

e.target

指触发事件的元素（按钮）<代码>rot存储属性

操作类型

。根据

rot

将应用正确的操作。优点是不需要创建新函数或将函数包装到绑定中。

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

  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);

检查此选项：

---

快乐编码

您不能在

addEventListener

中使用

onButtonClick（'rUp'）

。这将在解析函数时直接执行该函数。更改为

onButtonClick.bind（null，'rUp'）

，

cubeRot.style.transform=rot

我认为cubeRot没有定义，应该是

document.querySelector（'.cube-rot'）。style.transform=rot

？在HTML中添加一些数据，这样可以使函数更加通用，例如，

然后您可以在handler@Goten定义好了……我真的很喜欢最后一个解决方案。这是一个简约的纯JavaScript代码。您能解释一下为什么要使用

^

插入符号来获取选择器吗？插入符号是其中的一部分，其形式为

[attributename^='startvalue']

。在上面的代码中，它选择其

class

属性以

'show-'

开头的所有元素，如

'show-up'

。这可能是一个有用的技巧，但有点脆弱。例如，如果将类添加到元素中，使属性变成

class=“button show up”

，则选择器将停止工作。为了让它再次工作，您必须将html更改为

class=“show up button”

。

  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);