`fiddle`

Question

我刚刚开始学习JavaScript，并根据点击的i元素创建了一个点击函数来更改li的值。可以使用addEventLisener发送带有if statement的变量，而不是具有基本相同功能的3倍。因为如果我再添加1或2个li，它会添加许多不必要的代码。

HTML：

<div><img src="image1" />
<ul>
<li id="list1">1</li>
<li id="list2">2</li>
<li id="list3">3</li>
</ul>
</div>

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

}

因此，当点击其中一个li元素时，它将更改当前显示的img。

Answer 1

绑定到列表，而不是列表项 - <ul id="ul1">...：

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

http://jsfiddle.net/seancannon/D6HX4/

Answer 2

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

假设<ul>元素现在id "list"：

var list = document.getElementById("list");
var i = null;
list.addEventListener("click", function(e) {
    window.i = parseInt(e.target.innerHTML, 10);
    console.log(window.i);
});

Answer 3

每个<li>，

不需要单独的代码

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

HTML：

<div>
<ul id="All_List">
<li id="list1">1</li>
<li id="list2">2</li>
<li id="list3">3</li>
</ul>
</div>

JavaScript的：

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 */
}

这是：

`fiddle`

也是如此。

希望它会对你有所帮助。干杯！

Answer 4

这是Vedant Terkar答案的“改进/更清晰”。这可能会给出一个更明确的方面他给出的答案。

如果我们提供ul ID组。我们不需要ul内的每个列表项的ID。

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

的Javascript

var i=0;

我们将i设置为全局变量并且等于0，假设如果没有其他任何调用它将显示图像（0）。

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

我们现在正在创建一个名为Nodelist的{{1}}。然后我们遍历lis以查找单击哪个list-element。

NodeList

使用addEventListener包含变量

4 个答案:

`fiddle`