Question

我正在创建一个Javascript程序，我想通过其类名对元素进行样式更改。这个类名有多个元素，但我想定位被单击的元素。这些是动态创建的。

我之所以没有粘贴代码，是因为我不想根据自己在做什么，而只是想知道如何做。

很抱歉，如果以任何方式造成混淆。

Answer 1

使用querySelectorAll获取所有元素并添加事件侦听器。在回调函数event中，参数具有target属性，该属性是被单击的元素。

document.querySelector('.className').addEventListener(event => {
    // event.target is the element that is clicked
});

Answer 2

这会遍历具有类名window.onload = function(){ window.location = 'http://example.com' };的所有元素，并向它们添加一个onclick事件处理程序，该事件处理程序会将元素本身记录到控制台中。

.your-class-goes-here

出于浏览器向后兼容（向下至IE8）的原因，

document.querySelectorAll('.your-class-goes-here').forEach((el) => el.addEventListener("click", function(){console.log(this);}));

Answer 3

您可以尝试以下操作：

const buttons = [].slice.call(document.getElementsByClassName('someclass'))


function classToggler(classToAssign, e) {
  e.target.classList.toggle(classToAssign)
}
buttons.forEach(button => {
  button.addEventListener('click', e => classToggler('classToAssign', e))
})

.classToAssign {
  background: black;
  color: #fff;
}

<button class="someclass">Click me 1</button>
<button class="someclass">Click me 2</button>
<button class="someclass">Click me 3</button>
<button class="someclass">Click me 4</button>
<button class="someclass">Click me 5</button>

恢复的是：

收集具有特定类的所有按钮，并使其成为可迭代的数组
创建一个函数来切换可以作为参数传递的特定类
为每个按钮添加一个click事件监听器，同时还传递click事件，以便您可以仅定位该特定按钮

Answer 4

谢谢梅尔·马卡鲁索。

我的问题是 .classToAssign 被添加到我的内部标签 (h4) 中。

<button class="someclass"><h4>Click me 3</h4></button>

解决方案是为内部标签添加一个 css 以禁用指针事件：

.someclass h4 {pointer-events: none;}

document.getElementsByClassName（）。onclick与动态元素

4 个答案: