javascript - 您如何检测类中的哪个元素被 Javascript 单击？

Question

假设我们有一个带有类的无序列表:

    <ul class="list-class">
        <li><a href="#">All</a></li>
        <li><a href="#">Breakfast</a></li>
        <li><a href="#">Lunch</a></li>
        <li><a href="#">Dinner</a></li>
        <li><a href="#">Snack</a></li>
   </ul>

假设现在我想创建一些函数，根据点击的项目执行不同的操作:

function whichElement() {
    alert("The -- Link has been clicked");
}

如何在不为每个项目创建单独的函数并编写内联 onclick=""事件的情况下完成这项工作？我也愿意使用 jQuery。

Answer 1

如果我理解正确的话，这个怎么样:

var items = document.querySelectorAll('.list-class li');

[].forEach.call(items, function(item){

  var text = item.textContent.trim().toLowerCase();

  item.addEventListener('click', function(){
    if (text == 'all') {
      //...
    }
    //...
  });
});