点击获取元素ID

Question

我在我的代码中使用jQuery实现了几个可折叠的段。

像这样：

<h2 class="expand">Link1</h2> 
       <div class="collapse"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
        eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
        qui officia deserunt mollit anim id est laborum.</p>     
        <p class="top"><a href="#content">Top of page</a></p> 
       </div> 

还有像上面的代码几个相同的部分。

我想要获得这些标题，当我点击它的每个标识。说，当我点击“Link1”时，我想让它的ID弹出。

我已经定义了在弹出窗口中显示id的函数。这里是：

$(document).ready(function() { 
     $("a").click(function (event) { 
      alert(event.target.id); 
     }); 
    }); 

每当我运行应用程序，并点击（说）“Link1”，我得到一个空白输出。声明所有链接的单独类似乎是一种选择，但我想这样做，否则.. 任何人都可以提出任何其他方式来获取这些元素的Id？

Answer 1

您提供的标记暗示您没有为这些元素提供标识。试着给他们一个ID，像这样：

<a id="contentLink" href="#content">Top of page</a> 

然后，你可以这样做：

$(document).ready(function() { 
    $("a").click(function (event) { 
     alert($(this).attr("id")); 
    }); 
}); 

编辑：或者，如果当你说 “ID”，你实际上意味着HREF（如您的标记有HREF属性），那么你可以做：

$(document).ready(function() { 
    $("a").click(function (event) { 
     alert($(this).attr("href")); 
    }); 
}); 

Answer 2

首先，你应该使用this如果你的意思是在处理程序绑定的元素。试想一下：

<a href="#content" id="a"><span id="b">foo</span></a> 

如果绑定的a元素上的处理程序，this.id将a而event.target.id将b。除非你的意思是event.target，请使用this。其次，id值不会被继承（事实上，因为它们必须是唯一的，所以它们是没有意义的）。您或者需要给a元素一个id值，或者您需要遍历文档并找到相关元素以获取其id。

您可以用代码做到这一点是这样的：

$(this).closest('div').prev().attr('id') 

然而您h2标签实际上并没有一个id，所以你需要给它一个。如果你想获得该标签的文本，使用text：

$(this).closest('div').prev().text()