javascript - 选择数组内部的所有数组元素

Question

我有两个列表，每个列表有 3 个项目，我想在有人单击任何项​​目时显示一条警报消息。

对于所有 List1 项目 = 'List1 项目已单击'对于所有 List2 项目 = 'List2 项目被点击'

由于操作几乎相同，我希望仅在一个代码块中完成此操作(因此，如果我将来需要添加额外的列表，代码很容易维护)。

这是我的第一次尝试:

var list1 = document.getElementsByClassName('list')[0].children;
var list2 = document.getElementsByClassName('list')[1].children;
var listArray = [list1, list2];

for(i = 0; i < listArray.length; i++){
  (function(){
    listArray[i][i].onclick = function(){
      alert("element clicked");
    }
  })();
}
 

<ul class='list'>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
<ul class='list'>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

但奇怪的是，该代码仅将 onclick 事件分配给第一个数组的第一个元素和第二个数组的第二个元素。

所以我的第一个问题是我不知道如何准确选择“listArray”中所有数组的所有子级来将 onclick 事件分配给所有这些子级。

我的第二个问题是，我不知道如何在没有事件监听器的情况下在 javascript 中执行此操作:“如果单击的元素是 list1 的子元素，则显示“消息 1”，但如果单击的元素是 list2 的子元素，则显示“message2”。我想我需要一个 if 条件来执行此操作，但我不知道如何具体实现它。

类似这样的吗？

if(elementClicked = childOfParentA){
 Do this.
 }else if(elementClicked = childOfParentB){
   Do this.
 }"

这是一个CODEPEN与化妆品

请避免使用 Jquery 解决方案。

Answer 1

上面的代码适用于第一个列表中的第一个项目和第二个列表中的第二个项目(因为您有 [i][i]，并且 0 位于 [ 0, 1])。

这是一个可能的修复:

var list1 = document.getElementsByClassName('list')[0].children;
var list2 = document.getElementsByClassName('list')[1].children;
var listArray = [list1, list2];

for(i = 0; i < listArray.length; i++){
  (function(){
    for (j = 0; j < listArray[i].length; j++) {
      var l = i + 1;
      listArray[i][j].onclick = function(){
        alert("List " + l +" element clicked " + this.innerHTML);
      }
    }
  })();
}

<ul class='list'>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
<ul class='list'>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Note the usage of the local variable l to save the current list we work on in order to alert the relevant list.