我怎样才能在jQuery中操作这个对象

Question

jQuery(function () {
    $('#square a').click(function(e) {  
    // How is the e object structured
    }); 
})

我有一个id为square的div和链接。单击链接时，它们会触发游戏循环功能。我需要知道点击来自哪个ID。广场内有五个链接，每个链接都有一个id。有没有更好的方法来跟踪这一点。或者我应该为每个具有自己ID的链接设置一个函数，但这对我来说似乎并不干净。

Answer 1

在事件处理程序中，您可以使用this引用事件被触发的DOM元素：

$('#square a').click(function(e) {  
    alert(this.id);
});

因此jQuery使得访问元素非常方便。

如果你必须根据ID执行不同的代码，我建议创建某种地图：

var actions = {
    action1: function() {

    },
    action2: function() {

    },
    ...
}

然后只需从地图执行该功能：

$('#square a').click(function(e) {  
    actions[this.id]();
});

请确保为元素提供有意义的ID。

Answer 2

代码中的e是一个事件对象。 are here的文档。在事件处理程序中，this引用您已将处理程序挂钩的DOM元素（未包装在jQuery实例中）。例如：

jQuery(function ($) {
    $('#square a').click(function(e) {  
        alert(this.href);
    }); 
});

...会显示已点击的链接的href。

由于click事件冒泡了DOM，并且它们在a元素上也有默认行为（在链接之后），您可能对event.stopPropagation特别感兴趣（停止事件）在DOM）和event.preventDefault上冒泡（阻止默认操作）。如果你只是从事件处理程序中返回false，你就可以调用这两个函数，但有时你只想做一个或另一个。

Answer 3

这样的东西？

<div id='square'>
  <a id='link1'>Go forward!</a><br />
  <a id='link2'>Look left</a><br />
  <a id='link3'>Stop!</a><br />
  <a id='link4'>Look right</a><br />
  <a id='link5'>Go back!!!</a>
</div>

$('#square > a').live('click',function(event){
  var whichLink = $(this).attr('id');

  if ( whichLink == 'link1' ) GoForward();
  if ( whichLink == 'link2' ) LookLeft();
  if ( whichLink == 'link3' ) Stop();
  if ( whichLink == 'link4' ) CantTouchThis();
  if ( whichLink == 'link5' ) Hammertime();
});

Answer 4

快速检查这类内容的一个好方法是使用Firefox（Firebug），Chrome和Safari的console（我相信Opera也有类似的东西。）：

如果您通过Firebug控制台在任何带有jQuery的网页上运行以下代码：

jQuery("body").click(function(e) { console.dir(e); });

您将看到以下内容：

吨。 J.还提供了另一个优秀来源（t he jQuery API docs。）

Answer 5

$('#square a').click(function(e) {  
    alert($(this).attr("id"));
}); 

我希望这就是你要找的东西

Answer 6

另一种获取未被提及的点击元素ID的方法是通过事件对象并回答有关e参数的问题：

jQuery(function () {
    $('#square a').click(function(e) {  
       alert(e.target.id);
    }); 
});

使用e.target.id的优点是您可以获取实际点击的子对象的ID ，而this.id将始终返回元素点击事件的ID处理程序被绑定。

此外，如果您要使用this，则没有理由声明e：

$(document).ready(function() {
    $('#square a').click(function() {  
       alert(this.id);
    });
});