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

Question

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

$('#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

提前致谢。

Answer 1

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

Answer 2

试试这个

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>

Answer 3

建议有很多替代方案，但具体 您的代码中的错误与您对 :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>

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

Attach event handler to every li

javascript

jquery

eventhandler