Question

我是学习JavaScript的新手，我已经尝试阅读，并寻找类似的答案，但一切都指向jQuery，我想避免使用这个问题。我无法弄清楚什么是jQuery以及JS中仍然有用的东西......

我已经设置了一个可以获取innerHTML的函数，但我似乎无法将它分配给相同的类，否则它只能在第一个实例上工作，我尝试创建多个类但是基本上他们都是具有不同价值的同一个按钮...

document.querySelector(".b1").addEventListener("click", writeDisp);
document.querySelector(".b2").addEventListener("click", writeDisp);
document.querySelector(".b3").addEventListener("click", writeDisp);
document.querySelector(".b4").addEventListener("click", writeDisp);

function writeDisp() {
  if(dispNum.length < 9){
    if(dispNum === "0") {
      dispNum = this.innerHTML
    } else {
      dispNum = dispNum + this.innerHTML};
      document.querySelector(".display").textContent = dispNum;
    }
  }
}

我怎样才能让这更简单。因为有更多的.b *类要添加，而且如果可能的话我宁愿没有大量的列表。

谢谢，

Answer 1

var class_elem = document.querySelectorAll("button[class^='b']");

function writeDisp(){
  if(dispNum.length < 9){
    if(dispNum === "0"){dispNum = this.innerHTML}else{dispNum = dispNum + this.innerHTML};
    document.querySelector(".display").textContent = dispNum;
  }
}

for (var i = 0; i < class_elem.length; i++) {
    class_elem[i].addEventListener('click', writeDisp, false);
}

//Here your code in javascript only.

Answer 2

如果您不想使用jquery，可以像这样使用原生document.querySelectorAll API

function writeDisp(){
  if(dispNum.length < 9){
    if(dispNum === "0"){
        dispNum = this.innerHTML
    } else {
        dispNum = dispNum + this.innerHTML
    }
    document.querySelector(".display").textContent = dispNum;
  }
}

// this line will select all html tags that contains a class 
// name starting with 'b'
var doms = document.querySelectorAll("[class^=b]");

doms.forEach(function(dom) {
  dom.addEventListener('click', writeDisp);
})

注意

querySelectorAll将仅获取其中b*被定义为第一类的DOM实例，因此在多个类定义的情况下，它将不会获取那些没有所需类名的DOM。第一。这意味着如果你有像<div class="a box"></div>这样的DOM定义，那么这将被忽略，因为在这里，以b开头的classname位于一个类之后。

Javascript，Click eventlistener对多个类做同样的事情

2 个答案: