获取所单击项目的ID

Question

我有这个HTML代码：

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

我在jQuery中有这个代码：

$('b.edit').click(function(){
    //GET THE ID OF THE b.edit: e.g foo1, foo2, foo3
    $('.editP').focus();
});

我怎样才能获得b.edit的id值，因为有多个b.edit实例，我想获得点击的一个特定id ？ 我怎样才能做到这一点？

谢谢，对不起，我是javascript的新手。

Answer 1

我从你的示例代码中假设你正在使用jQuery？ 如果是这样，您可以获得如下ID：

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

编辑：

如果所需要的只是id，那么对该属性的直接引用确实更有效。

也可以从jQuery对象中获取：

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

示例小提琴： http ： //jsfiddle.net/5bQQT/

Answer 2

试试这个：

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

Answer 3

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

样品
http://jsfiddle.net/ck2Xk/

Answer 4

尝试这个。 您可以使用关键字“this”来检索attr ID ...

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

Answer 5

$('.edit').click(function(){
   var theId = $(this).attr('id');
}

这将为您提供使用.edit类点击的任何内容的ID

Answer 6

在JQuery中传递click处理程序时，实际上有一个对事件对象的引用。 此事件对象具有名为target的属性，该属性是对单击的元素的引用。

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

由于您有对目标元素的引用，因此您可以执行任何您喜欢的操作。 在这种情况下，您只需访问eventObject.target.id 。

Answer 7

这样的事情：

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

Answer 8

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

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

我永远不明白为什么人们使用jQuery来获取简单的属性，这些属性涉及两个jQuery函数调用（以及一堆开销来创建一个jQuery对象），而不是一个直接的属性引用。

Answer 9

这在Javascript中称为事件委托。 更多信息可以在Zakas博客中找到http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/

简而言之， you attache the event to a parent node and then waiting for some event on the child node 。 在下面的示例中，我将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中实现事件委托，您可以查看http://api.jquery.com/on/#direct-and-delegated-events

Answer 10

即使这不是你问题的真正答案。 我会试着解释为什么你的要求不是要走的路。 因为你是新手，因为学习不好的做法可能很难忘掉。 Allways在通过Class查找元素之前尝试搜索ID。 还要尽量避免给每个元素赋予相同的类（在本例中为ID），只需给它一个封装父类。

此外，元素的id非常具体，最好用于查找/选择/绑定事件。 一个id通常应该是唯一的，因此在你的情况下可以优化一些东西，比如：

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

现在，如果你想知道哪个 被点击有多种方法可以完成它，但一个好的方法是简单地绑定父项的子项（即<div id="foo"> .. </div> ）。 通过这种方式，您可以更改快速的结构，而无需更改所有类和ID。

使用jQuery，您可以使用.attr()函数获取属性id。 但是我告诉你， id非常具体，因此在javascript世界中拥有自己的权利。 一个id也可以直接定位（ 'DOMelement.id' ，但现在解释得太多了）

以两种方式可以定位<b> ：

例子a）

var b_elements = $("#foo").children();

例b）

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

我们可以将jQuery（或javascript事件）添加到这些找到的元素中。 关于jQuery的好处是它简化了很多工作。 因此，在您的情况下，如果您想知道某个单击的<b>字段的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进行查找，也不能有共同的父进程。

祝学习好运:)