Question

我有这个代码，我想在不使用id或类的情况下为每个<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

在a

之前加入:eq()选择器

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

正如所建议的那样，有许多替代解决方案，但具体而言代码中的错误与:eq(0)的使用情况有关。根据{{3}}将其更改为#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;
  }
});

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 3

试试这个

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

3 个答案: