javascript - 如何使用 jQuery 查找列表 编号？

Question

我想找到 <li> 的顺序用户已点击。例如，

<ul>
    <li id="li1">This is list one</li>
    <li id="li2">This is list Two</li>
    <li id="li3">This is list three</li>
</ul>

当用户单击列表项 2 时，我必须检索该项目的 id 作为 li2。如何实现这一目标？

Answer 1

正如下面所指出的，有几种方法可以添加事件处理程序。 .bind 是一个，.click 是另一个。您还可以单独使用您的逻辑创建函数，并在绑定(bind)或单击事件附件中引用它。

<script type="text/javascript">
// version 1 with bind
  $(function(){
    $("li").bind("click", function(){alert(this.id);});
  })
</script>

<script type="text/javascript">
// version 2 with click and the separated method
  $(function(){
    $("li").click(listClickHandler);
  })
  function listClickHandler(){
    alert(this.id);
  }
</script>

当您动态分配事件处理程序或在页面生命周期的不同点分配事件处理程序时，将处理程序方法与处理程序分配分开非常有意义。我更频繁地使用绑定(bind)而不是单击的原因是绑定(bind)可以用于许多不同的事件，因此很容易想象创建一个事件分配工厂:

<script type="text/javascript">
// version 3, event assignment factory
  function assign(selector, event, method){
    $(selector).bind(event, method);
  }
  $(function(){
    assign(".menu li", "click", listClickHandler);
    assign(".menu li", "mouseover", listHoverHandler);
  })
  function listClickHandler(){...};
  function listHoverHandler(){...};
</script>

希望这比您所需要的更多。