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]）。

这是一个可能的解决方法：

＆＃13;

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);
      }
    }
  })();
}

＆＃13;

<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>

＆＃13;

请注意使用局部变量l来保存我们正在处理的当前列表，以便提醒相关列表。

Answer 2

更精确的方式，无需存储在单独的数组中。

document.querySelectorAll("ul").forEach(function(ul, index){
  ul.querySelectorAll('li').forEach(function(li){
    li.onclick = function(){
      alert("elements of UL-" + index+1 + " 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>

Answer 3

通常只有第一个/第一个和第二个/第二个......等响应点击。这是因为你这样指定：

listArray[i][i]

请注意，i和i在该行中始终相同...

如果您使用适当的选择器选择一个可迭代中的所有可点击元素，则可以更简单地执行此操作：

＆＃13;

function handler(){
    alert("element clicked " + this.textContent);
} 
Array.from(document.querySelectorAll('.list>li'), li => li.onclick = handler);

＆＃13;

<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>

＆＃13;

Answer 4

.className

＆＃13;

window.addEventListener("click", function(e){
  console.log (e.target.parentElement.className);
});

＆＃13;

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

＆＃13;

选择数组内的所有数组元素

4 个答案: