Javascript 使用addEventListener包含变量

我刚刚开始学习JavaScript，并制作了一个单击函数，根据单击的

li

元素来更改

I

的值。可以使用

addEventLisener

发送变量，用

if语句检查，而不是使用3x基本相同的函数。因为如果我再添加1或2个
li
，就会添加很多不必要的代码

HTML:

因此，当单击其中一个
li
元素时，它将更改当前显示的img。
绑定到列表，而不是列表项-
…
：

document.getElementById('ul1').addEventListener('click', function (e) {
    var li = e.target;
    alert(li.id); // list1, list2, respectively, etc.
});

绑定到列表，而不是列表项-
…
：

document.getElementById('ul1').addEventListener('click', function (e) {
    var li = e.target;
    alert(li.id); // list1, list2, respectively, etc.
});

正如蒂姆所说，绑定到列表并使用
e.target
。然后，根据
e.target.innerHTML
更改
i
（因为出于您的目的，
innerHTML
类似于
id
，但更简单），这样做更容易

假设
元素现在具有
id
的
列表“
：

正如Teemu所说，绑定到列表并使用
e.target
。然后，根据
e.target.innerHTML
更改
i
（因为出于您的目的，
innerHTML
类似于
id
，但更简单），这样做更容易

假设
元素现在具有
id
的
列表“
：

每个
不需要单独的代码

以下是如何在单个功能中执行此操作：

HTML:



1
2
3


JavaScript:

var list1 = getElementById('list1');
var list2 = getElementById('list2');
var list3 = getElementById('list3');

list1.addEventListener("click", clicked1);
list2.addEventListener("click", clicked2);
list3.addEventListener("click", clicked3);
var i = 0;

function clicked1(){
    i= 0;
    loop();
}
function clicked2(){
    i = 1;
    loop();
}
function clicked3(){
    i = 2;
    loop();
}
function loop(){
    if (i > 2){
        i=0;
    }
    var imageloop = getElementById('slideshow').getElementsByTagName('img');
    imageloop[0].src = 'image' +  i;
    i++
    setTimeout(loop,3000);

}

var clicked_li=0; /* It'll store the number of <li> being clicked */
var ul=document.getElementById("All_List"); /* <ul> Element with all <li> */
window.onload=function(){
var lis=ul.getElementsByTagName("li"); /* All <li>'s from <ul> */
for(var i=0;i<lis.length;i++){
var li=lis[i]; /* Specific <li> from <ul> ie, lis[0] means first <li> of <ul> */
    li.addEventListener("click", function(){  /* Listen and bind click event to that <li> */
    clicked_li=getIndex(this);  /* Store Which <li> Was clicked in clicked_li */
    alert("'list"+clicked_li+"' was clicked!");  
     /* if you just want to get the id you can use event.target.id; instead of getIndex(); */
    }, false);
}
};

function getIndex(node) {
var childs = node.parentNode.getElementsByTagName("li"); /* Get parent <ul> and all child <li> of that parent */
for (var i = 0; i < childs.length; i++) {
 if (node == childs[i]) break; /* Find which <li> from current <ul> was clicked */
 }
return (i+1); /* Return No.(index) of that <li> starting with 1 */
}

var\u li=0；/*它将存储被单击的
的数量*/
var ul=document.getElementById（“所有列表”）；/*
具有所有
*/
window.onload=function（）{
var lis=ul.getElementsByTagName（“li”）；/*所有
来自
*/
对于（var i=0；i，每个
不需要单独的代码

以下是如何在单个功能中执行此操作：

HTML:



1
2
3


JavaScript:

var list1 = getElementById('list1');
var list2 = getElementById('list2');
var list3 = getElementById('list3');

list1.addEventListener("click", clicked1);
list2.addEventListener("click", clicked2);
list3.addEventListener("click", clicked3);
var i = 0;

function clicked1(){
    i= 0;
    loop();
}
function clicked2(){
    i = 1;
    loop();
}
function clicked3(){
    i = 2;
    loop();
}
function loop(){
    if (i > 2){
        i=0;
    }
    var imageloop = getElementById('slideshow').getElementsByTagName('img');
    imageloop[0].src = 'image' +  i;
    i++
    setTimeout(loop,3000);

}

var clicked_li=0; /* It'll store the number of <li> being clicked */
var ul=document.getElementById("All_List"); /* <ul> Element with all <li> */
window.onload=function(){
var lis=ul.getElementsByTagName("li"); /* All <li>'s from <ul> */
for(var i=0;i<lis.length;i++){
var li=lis[i]; /* Specific <li> from <ul> ie, lis[0] means first <li> of <ul> */
    li.addEventListener("click", function(){  /* Listen and bind click event to that <li> */
    clicked_li=getIndex(this);  /* Store Which <li> Was clicked in clicked_li */
    alert("'list"+clicked_li+"' was clicked!");  
     /* if you just want to get the id you can use event.target.id; instead of getIndex(); */
    }, false);
}
};

function getIndex(node) {
var childs = node.parentNode.getElementsByTagName("li"); /* Get parent <ul> and all child <li> of that parent */
for (var i = 0; i < childs.length; i++) {
 if (node == childs[i]) break; /* Find which <li> from current <ul> was clicked */
 }
return (i+1); /* Return No.(index) of that <li> starting with 1 */
}

var clicked_li=0；/*它将存储被单击的
的数量*/
var ul=document.getElementById（“All_列表”）；/*
包含All
*/
window.onload=function（）{
var lis=ul.getElementsByTagName（“li”）；/*所有
来自
*/
对于（var i=0；i而言，这是Vedant Terkar回答的“改进/更清晰”部分。这可能会在以下方面提供更清晰的信息：
他给出的答案

如果我们给
ul
id组。我们不需要
ul
中每个列表项的id

<ul id="group">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

我们将
i
设置为一个全局变量，并等于0，假设它在不调用任何其他变量的情况下将显示图像（0）

window.onload=function(){
  var lis=document.getElementById("group").getElementsByTagName('li');

现在，我们正在创建一个名为
lis
的
Nodelist
。然后我们通过
Nodelist
循环查看正在单击的列表元素

  for(i=0;i<lis.length;i++){
    var li=lis[i];
    li.addEventListener("click",index, false);
  }
}

function index(){ 
  var lis = document.getElementById("group").getElementsByTagName('li');
  i = getIndex(this);
  for(var a=0; a < lis.length; a++){
    if(a ==i){
      lis[i].innerHTML = 'Choosen';     
    }else{
      lis[a].innerHTML = 'list'+a;  
    }

  }
}

function getIndex(node) {
  var childs = node.parentNode.getElementsByTagName("li");
  for (var i = 0; i < childs.length; i++) {
    if (node == childs[i]) break;
  }
  return (i);
}

for（i=0；i这是对Vedant Terkar答案的“改进/更清晰”。这可能会在以下方面提供更清晰的信息：
他给出的答案

如果我们给
ul
id组。我们不需要
ul
中每个列表项的id

<ul id="group">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

我们将
i
设置为一个全局变量，并等于0，假设它在不调用任何其他变量的情况下将显示图像（0）

window.onload=function(){
  var lis=document.getElementById("group").getElementsByTagName('li');

现在，我们正在创建一个名为
lis
的
Nodelist
。然后我们通过
Nodelist
循环查看正在单击的列表元素

  for(i=0;i<lis.length;i++){
    var li=lis[i];
    li.addEventListener("click",index, false);
  }
}

function index(){ 
  var lis = document.getElementById("group").getElementsByTagName('li');
  i = getIndex(this);
  for(var a=0; a < lis.length; a++){
    if(a ==i){
      lis[i].innerHTML = 'Choosen';     
    }else{
      lis[a].innerHTML = 'list'+a;  
    }

  }
}

function getIndex(node) {
  var childs = node.parentNode.getElementsByTagName("li");
  for (var i = 0; i < childs.length; i++) {
    if (node == childs[i]) break;
  }
  return (i);
}

用于（i=0；在处理函数中，单击
ul
，从的
id
提取数字，并使用该数字代替
i
。简短而简单。在处理函数中，单击
ul
，从的
id
提取数字，并使用该数字代替
i
。简短而简单。这是一个好的开始，只添加一点代码，这就像一个符咒。对于我需要使用它的目的。这是一个好的开始，只添加一点代码，这就像一个符咒。对于我需要使用它的目的。我只是不知道人们在投反对票时会怎么想，这不关他们的事，但他们仍然这么做。这真的很糟糕。他们必须强制我个人认为这是一个很好的答案，因为点击的li elemets函数组代表从0开始的节点列表，而不是从1开始的id。在第一种情况下，我想删除id以获得更为动态的方式，+1我没有否决投票，但你的代码促进了反模式rns、非可伸缩性、重复、冗余和隐式变量声明，以及混乱的语法格式——所有这些都在同一个答案中。这个答案是如何获得投票的，这是一个谜，更不用说被接受的答案是什么“真的很糟糕”，因为现在有活动授权问题的未来人会来到这里，看到你糟糕的建议，并认为这是他们应该做的。如果这是你最好的答案，太好了，谢谢你的努力-当你被叫出时抱怨，长大点。@AlienWebguy感谢你解释代码的错误，我编辑了它，希望现在很好。第二部分我来这里是为了帮助人们，这是我最喜欢的，所以当有人批评（否决票）时，我相信他至少应该告诉我出了什么问题？是的，我来这里不是为了尽我最大的努力，只是为了帮助人们完成代码工作。我也不是在抱怨。是的，每个人都有权表达他们的观点。我试图给团队提出建议，让他们能够使用简单的技术来提高用户的热情。+1用于解释。@Nicco，我很高兴我可以帮助你。我只是不知道人们在投否决票时会怎么想，这不关他们的事，但他们还是这么想。这样做真的很糟糕。他们必须用否决票强制发表评论，否则没有用。我个人认为这是一个很好的回答，s