将事件处理程序附加到每个 li答案

【问题标题】：Attach event handler to every li将事件处理程序附加到每个 li
【发布时间】：2016-08-07 09:05:18
【问题描述】：

我有这段代码，我想将不同的事件处理程序附加到每个 <a> 而不使用 id 或类。我试过了，但没有用...

$('#points ul li a').on('click', function(event) {
  // I don't know why this selectors doesn't work
  if ($(event.target).is(':eq(0)')) {
    alert('0') // and do something
  }
  if ($(event.target).is(':eq(1)')) {
    alert('1') // and do something 
  }
  if ($(event.target).is(':eq(2)')) {
    alert('2') // and do something
  }
})

#points ul {
  list-style: none;
  font-size: 5em;
  padding: 0;
  margin: 0;
  line-height: .5em;
}
#points ul li {
  float: left;
}
#points ul li a {
  text-decoration: none;
  color: grey;
  padding: .1em;
  line-height: .1em
}
#points {
  position: relative;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="points">
  <ul>
    <li><a href="#">.</a>
    </li>
    <li><a href="#">.</a>
    </li>
    <li><a href="#">.</a>
    </li>
  </ul>
</div>

<script

提前致谢。

【问题讨论】：

所有答案都是正确的。但是当我在网页的主html中插入代码时它没有工作，在我挣扎了一段时间后我意识到为什么：在主html中之前有更多的标签，所以这段代码，例如：（ e.is ( 'a:eq(1)' ) 将匹配页面中的第一个，而不是 #points div 中的第一个，这是真正的目标。我想知道是否可以定位#points 的第一个标记与计算整个页面中标记的数量不同。谢谢。
#points>ul>li>a:eq(0) 可以解决问题。它只需要a 内部li 内部ul 内部#points。我的回答已经有了这个。检查 snipeet 示例。
成功了！！有可能做这样的事情吗？数 = 1; $ ( '#points>ul>li>a:eq("num")').toggleClass ( 'color' );
$('#points>ul>li>a:eq(' + num + ')') 是这样做的正确方法。欢呼
非常感谢你的帮助队友！！！

标签： javascript jquery eventhandler

【解决方案1】：

正如建议的那样，有许多替代解决方案，但具体的 代码中的错误与您对:eq(0) 的使用有关。根据jQuery documentation 将其更改为#points>ul>li>a:eq(0)。

替换
```
if ($(event.target).is(':eq(1)')) {
```
有
```
if ($(event.target).is('#points>ul>li>a:eq(0)')) {
```
注意：我已经使用了#points>ul>li>a，所以上面和下面的其他<a> tags没有被选中。（根据您对此的评论）

我想补充一点，如果我被要求做同样的事情，我会接受方法如：

var objArr = $('#points>ul>li>a');
objArr.on('click', function(event) {
  switch($(objArr).index(this)){
    case 0:
      alert('0');
      break;
    case 1:
      alert('1');
      break;
    case 2:
      alert('2');
      break;
  }
});

也就是说你的方法也有效，工作示例我上面提到的错误已调整：

$('#points>ul>li>a').on('click', function(event) {
  // I don't know why this selectors doesn't work
  if ($(event.target).is('#points>ul>li>a:eq(0)')) {
    alert('0') // and do something
  }
  if ($(event.target).is('#points>ul>li>a:eq(1)')) {
    alert('1') // and do something 
  }
  if ($(event.target).is('#points>ul>li>a:eq(2)')) {
    alert('2') // and do something
  }
})

#points>ul {
  list-style: none;
  font-size: 5em;
  padding: 0;
  margin: 0;
  line-height: .5em;
}
#points>ul>li {
  float: left;
}
#points>ul>li>a {
  text-decoration: none;
  color: grey;
  margin: .1em;
}
#points>ul>li>a {
  background-color: yellow;
}
div {
  margin-bottom: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href="#">random link</a>
  <a href="#">random link</a>
  <a href="#">random link</a>
</div>
<br />
<div id="points">
  <ul>
    <li><a href="#">.</a>
    </li>
    <li><a href="#">.</a>
    </li>
    <li><a href="#">.</a>
    </li>
  </ul>
</div>
<br />
<br />
<br />
<div>
  <a href="#">random link</a>
  <a href="#">random link</a>
</div>

【讨论】：

【解决方案2】：

在:eq() 之前包含a 选择器

$('#points ul li a').on('click', function(event) {
  var el = $(event.target);
  if (el.is('a:eq(0)')) {
    alert('0') // and do something
  }
  if (el.is('a:eq(1)')) {
    alert('1') // and do something 
  }
  if (el.is('a:eq(2)')) {
    alert('2') // and do something
  }
})

#points ul {
  list-style: none;
  font-size: 5em;
  padding: 0;
  margin: 0;
  line-height: .5em;
}
#points ul li {
  float: left;
}
#points ul li a {
  text-decoration: none;
  color: grey;
  padding: .1em;
  line-height: .1em
}
#points {
  position: relative;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="points">
  <ul>
    <li><a href="#">.</a>
    </li>
    <li><a href="#">.</a>
    </li>
    <li><a href="#">.</a>
    </li>
  </ul>
</div>

<script

【讨论】：

【解决方案3】：

试试这个

var items = $('#points li a');

$('#points ul li a').on('click', function(event) {

  var currentItem = event.currentTarget
  
  if (items.index(currentItem) === 0) {
    alert('0') ;
  }
  if (items.index(currentItem) === 1) {
    alert('1') ;
  }
  if (items.index(currentItem) === 2) {
    alert('2');
  }
})

#points ul {
  list-style: none;
  font-size: 5em;
  padding: 0;
  margin: 0;
  line-height: .5em;
}
#points ul li {
  float: left;
}
#points ul li a {
  text-decoration: none;
  color: grey;
  padding: .1em;
  line-height: .1em
}
#points {
  position: relative;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="points">
  <ul>
    <li><a href="#">.</a>
    </li>
    <li><a href="#">.</a>
    </li>
    <li><a href="#">.</a>
    </li>
  </ul>
</div>

【讨论】：