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

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

1. 正如所建议的那样，有许多替代解决方案，但具体而言 代码中的错误与: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。 （根据你对此的评论）

2. 我想补充一点，如果我被要求做同样的事情，我会选择 方法如：

   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;
＆＃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;
＆＃13;
＆＃13;

Answer 3

试试这个

＆＃13;

＆＃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;

＆＃13;

＆＃13;