Javascript 获取所单击项目的id

我有以下html代码：

<b class = "edit" id = "foo1">FOO</b>
<b class = "edit" id = "foo2">FOO2</b>
<b class = "edit" id = "foo3">FOO3</b>

我如何获取

b.edit

的

id

值，因为b.edit有多个实例，我想获取单击的一个实例的特定

id

？我该怎么做

谢谢，对不起，我对javascript还很陌生

$('.edit').live('click', function() {
    alert( this.id );
});

样本

---

我从您的示例代码中假设您正在使用jQuery？如果是这样，您可以按如下方式获取id：

$('b.edit').click(function(){
 this.id;
});

编辑：

如果只需要id，那么直接引用属性确实更有效

也可以从jQuery对象获得：

$('b.edit').click(function(){
 $(this).attr('id');
});

---

小提琴样本：

试试这个。您可以使用关键字“this”检索属性ID

$（'b.edit'）。单击（函数（）{

警报（$（this）.attr（“id”）；

}）
尝试以下方法：

$('b.edit').click(function(e){ //When you use an event is better
                               //send the event variable to the 
                               //binding function.
    var id = e.target.id; //get the id of the clicked element.
   /*do your stuff*/
    $('.editP').focus();
});

这将获得使用
类单击的任何对象的ID。编辑
在JQuery中传递
单击处理程序时，实际上有一个对名为的对象的引用。此事件对象有一个名为的属性，该属性是对已单击元素的引用

$('b.edit').click(function(eventObject){
    eventObject.target // this is the element that was clicked.
});

因为您有一个对目标元素的引用，所以您可以做任何您喜欢的事情。在这种情况下，您可以访问如下内容：

var id = $(this).attr('id');

更清楚地说：

$('b.edit').live('click', function(){
    var id = $(this).attr('id');

    // in this scope this.id works too
    // var id = this.id;
});

因为还没有人展示过最简单的方法，它甚至不需要jQuery来获取id：

$('.edit').click(function() {
    alert(this.id);
});

我不明白为什么人们使用jQuery来获取简单的属性，这涉及到两个jQuery函数调用（以及创建jQuery对象的大量开销），而不是一个直接的属性引用。
这在Javascript中称为事件委派。更多信息可以在Zakas博客中找到

简单地说就是
将事件附加到父节点，然后在子节点上等待某个事件。在下面的示例中，我将onclick事件附加到文档本身。然后在事件处理程序中，您将编写一个switch语句来检查单击的元素id，然后对该元素执行您想要执行的操作

document.onclick = function(event){
    //IE doesn't pass in the event object
    event = event || window.event;

    //IE uses srcElement as the target
    var target = event.target || event.srcElement;    

    switch(target.id){
        case "foo1":
            foo1();
            break;
        case "foo2":
            foo2();
            break;
        case "foo3":
            foo3();
            break;
        //others?
    }
};


//some dummy handlers
var foo1 = function(){ 
    alert("You clicked foo1");
    };

var foo2 = function(){ 
    alert("You clicked foo2");
    };

var foo3 = function(){ 
    alert("You clicked foo3");
    };

关于如何在jQuery中实现事件委派，您可以查看
，尽管这不是您问题的真正答案。我会尽力解释为什么你的要求不合适。因为你是新来的，尤其是因为学习坏习惯很难忘却。在按元素的类查找元素之前，始终尝试搜索ID。还要尽量避免给每个元素赋予相同的类（在本例中是ID to），只需给它一个封装的父元素即可

此外，元素的
id
确实是特定的，最好用于查找/选择/绑定事件。一个
id
通常应该是唯一的，这样才能起作用，因此在您的情况下，可以对一些事情进行优化，比如：

<div id="foo"> 
  <b id="1">Foo</b>
  <b id="2">Other foo</b>
  <b id="3">Some foo</b>
</div>

例b）

我们可以将jQuery（或javascript事件）添加到这些找到的元素中。jQuery的优点在于它简化了许多工作。因此，在您的情况下，如果您想知道某个单击的
字段的
id
，您可以使用非常详细的方式：

b_elements.click(function()
{
  var clicked_element = $(this);
  alert(clicked_element.attr('id'));
});

冗长，因为你可以做得短得多，但谁会在意你学习时的几个字节，这使得记忆函数和事件更容易。假设您想通过查找您知道所单击id的位置来获取类
edit
：

b_elements.click(function()
{
  var clicked_element = $(this);
  alert(clicked_element.attr('class'));
});

总之，元素的id必须是唯一的，因为它使搜索大型文档的速度更快。另外，不要忘记查看和学习普通javascript，因为它也有助于在jQuery中编码，但反过来也不行。给定的问题需要在纯javascript中使用
for
循环，因为它不能按类或id进行查找，也没有公共父级

祝您学习顺利：）
您使用什么框架？jQuery？所有这些鼓吹
$（this）.attr（“id”）
而不是
this.id
的人让我非常非常难过。@Domenic我明白你的意思了。。。。。如果OP只是获取id而没有其他内容，那么下一条指令就是调用jQuery方法。。。（我知道你会说不用jQuery就可以使用focus方法，但它可以是任何jQuery方法）@ManseUK一个完全不同元素上的jQuery方法。@Domenic:-（*走开去拿些更浓的玻璃杯……对于一个可选的论据来说总是有点浓。P是可选的，但对于一个新手来说，把它作为强制性的更好。：DNot真的……读这个->
$（这个）
和
事件。target
可能会有所不同……一般来说，我不喜欢使用$（这个），因为滥用了$（）虽然在本例中，e.target.id很好地实现了它的目的。完全同意-只是添加了一些关于它们之间的区别的细节..并且这是一个可选参数..：-）好的，删除了
.live（）
因为它是这个代码块所说明的内容中不相关的一部分。因为世界上大多数地方还没有使用1.7，所以很多人仍然在使用
.live（）
，它在1.7中也可以正常工作，并且可能会继续工作一段时间，因为它被广泛使用。我知道人们应该转向
.on（）
在1.7+中，但人们似乎在这方面有点过火，尤其是在演示代码的一个不相关部分。而且，如果你想要一个在1.4、1.5、1.6和1.7中工作的代码演示，你不能使用
.on（）
.Oops.@Domenic:“所有这些人都在鼓吹
$（this.attr）（“id”）
而不是
这个.id
让我非常难过。“直接从你的链接->”从jQuery 1.7开始，.delegate（）已经被.on（）方法取代了“哦，糟糕，这是老办法为什么要用
$（this.attr（'id'）使用两个函数调用呢？”
当直接属性引用使用
this.id时运行得更快时
？这是jQuery效率低于直接javascript的地方。
var b_elements = $("#foo").children();

var b_elements = $("#foo").find('b');

b_elements.click(function()
{
  var clicked_element = $(this);
  alert(clicked_element.attr('id'));
});

b_elements.click(function()
{
  var clicked_element = $(this);
  alert(clicked_element.attr('class'));
});