Question

为基本问题道歉。如果没有找到包含jQuery的解释，很难找到有关JS事件处理的信息，而我正试图用纯Javascript来操作DOM。它一直在帮助我更好地理解浏览器的工作原理。

我正在尝试调用一个函数来为具有相同类的元素添加一个额外的类。

有人可以在这里解释正确的语法吗？

是否需要引用ID？

我尝试了很多方法。非常感谢。

function animateSquare(e) {
  var id = e.target.id
  var el = document.getElementById(id);
  el.className = el.className + "newClass";
};



window.onload = function() {
  var anim = document.getElementsByClassName("squareThing");
  for (var i = 0; i < anim.length; i++) {
    anim[i].click(function(e) {
      animateSquare(e);
    });
  }
}

<div class="squarething" id="one"></div>
<div class="squarething" id="two"></div>

Answer 1

在jQuery中添加类似于.on()的事件绑定的标准Javascript方法是addEventListener。

当你向el.className添加一个类时，你需要在它之前加一个空格，把它与现有的类分开。

您不需要使用getElementById(id)，因为e.target是元素本身 - 您正在获取元素，获取其ID，然后再次查找元素按ID，这是多余的。

＆＃13;

function animateSquare(e) {
  var el = e.target;
  el.className = el.className + " newClass";
};

window.onload = function() {
  var anim = document.getElementsByClassName("squarething");
  for (var i = 0; i < anim.length; i++) {
    anim[i].addEventListener('click', function(e) {
      animateSquare(e);
    });
  }
}

＆＃13;

.squarething {
  width: 50px;
  height: 50px;
  background-color: green;
  margin: 2px;
}
.newClass {
  background-color: red;
}

＆＃13;

<div class="squarething" id="one"></div>
<div class="squarething" id="two"></div>

＆＃13;

Answer 2

这应该足够了。试试吧：

＆＃13;

function animateSquare() {
  this.className += " newClass";
}

window.onload = function() {
  var anim = document.getElementsByClassName("squarething");
  for (var i = 0; i < anim.length; i++) {
    anim[i].onclick = animateSquare;
  }
}

＆＃13;

.squarething {
  padding: 1em;
  margin: .5em;
  float: left;
  background: blue;
}
.squarething.newClass {
  background: orange;
}

＆＃13;

<div class="squarething" id="one"></div>
<div class="squarething" id="two"></div>

＆＃13;

Answer 3

.click(handler)是一种jQuery方法 - 您需要.onclick或addEventListener方法：

window.onload = function() {
    var anim = document.getElementsByClassName("squarething");
    for (var i = 0; i < anim.length; i++) {
        anim[i].onclick = animateSquare;
    }
}

您还可以在处理函数中使用this：

function animateSquare(e) {
    this.className = el.className + "newClass";
};

在没有jquery的情况下传递事件对象

3 个答案: