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

如何获得id的{{1}}值，因为有多个b.edit实例，我想获得所点击的b.edit个特定内容？我怎么能这样做？

谢谢，对不起，我是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处理程序时，实际上有一个名为event object的引用。此事件对象具有名为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的好处是它简化了很多工作。因此，在您的情况下，如果您想知道某个已点击id字段的<b>，您可以使用非常详细的方式：

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进行查找，也不能有共同的父。

祝学习顺利：）

获取所单击项目的ID

10 个答案: