Javascript函数到类div？

Question

我正在开发一个动态添加内容的网站。我希望每个分区都有相同的类(class)。当您单击此 div 时，将在 JavaScript 脚本中调用该类，并在其中运行函数。

我该怎么做？

示例:

     <div class="thisclass">
      HTML
     </div>

     <div class="thisclass">
      HTML
     </div>

    <div class="thisclass">
      HTML
    </div>

    <script>
        document.getElementByClassName("thisclass").addEventListener("click",function(){
          //do something with the specific clicked div
        });
    </script>

我自己页面上的代码:

<div class="settings-opslag">
        <p>‹</p>
</div>
<script>
     document.getElementByClassName("settings-opslag").addEventListener("click",function(){
        document.getElementByClassName("settings-opslag").style.background = "red";
     });
</script>

谢谢!

Answer 1

您无法对 getElementsByClassName 函数返回的类似数组的对象应用事件监听器。监听器必须应用于单个元素。迭代它并绑定(bind)它。

Array.from(document.getElementsByClassName('thisclass')).forEach(v => 
  v.addEventListener('click', () => {
    // do something 
  })
)

您可以尝试不使用箭头函数和 ES6 功能:

const elems = document.getElementsByClassName('thisclass');
for (var i = 0; i < elems.length; i++) {
   elems[i].addEventListener('click', function() {
      // do something
   })
}

Array#from函数用于将类似数组的对象转换为数组。