Javascript 如何在单击时获取DIV ID

我是javascript新手，在网上找不到答案（我觉得这似乎很简单，但我可能没有使用正确的搜索词）

我正在使用jfiddle中的代码：

单击div时，它接受“item”类并更改其属性

我的目标是在一个小部件中有一个图像或一种类型的文本，当它很小时有另一个文本或图像，当它在点击时展开。我将通过在javascript中使用if语句在单击div时更改其自定义属性来实现这一点。（现在正在测试显示的更改）

我的问题是…既然单击时选择了“item”类，那么如何在单击时获取DIV ID？（现在我硬编码了div id）

多谢各位

使用JQuery：

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

对于纯JS：

var div = document.getElementsByTagName("div"); 
for(var i=0; i<div.length; i++){ 
 div[i].onclick = function(){ 
   alert(this.id); 
 } 
}

var div=document.getElementsByTagName（“div”）；
对于（var i=0；i感谢您提供的切换提示。我使用它使代码正常工作，并根据div的单击在框中显示不同的内容

以下是我最后做的：



函数toggleText1（）{
$（'one'u one'）。切换（）；
$（'one'u two'）。切换（）；
} 
函数toggleText2（）{
$（'two#u one'）。切换（）；
$（'two'u two'）。切换（）；
} 
显示更多
少展示
显示更多
少展示

我肯定有一种更优化的方法来定义所有的切换，但正如我前面提到的，我是一个完全的新手，希望通过更多的修补，我能找到这个方法。
你需要找到哪个
div
id
？为什么不使用
$（“#一”）.toggle（）
而不是所有原始Javascript？我需要能够在单击时找到所有这些内容。因此，容器的大小在单击时会发生变化…我希望一种类型的内容在其关闭时显示，另一种类型的内容在其打开时显示。我将尝试.toggle（）…不熟悉该功能，谢谢您的建议。这很好，但问题是您的代码使另一个展开函数无法工作（引用类“item”的函数）…我需要在执行小部件的展开/折叠时获取ID…我尝试使用您的代码声明一个全局变量，该变量可以传递到另一个click函数中，但迄今为止未成功。
var div = document.getElementsByTagName("div"); 
for(var i=0; i<div.length; i++){ 
 div[i].onclick = function(){ 
   alert(this.id); 
 } 
}

<script>
function toggleText1() {
$('#one_one').toggle();
$('#one_two').toggle();
} 
function toggleText2() {
$('#two_one').toggle();
$('#two_two').toggle();
 } 

</script>

<div id="container">
  <div class="item">
    <div id=one style=display:"none" class="item-content" onclick="toggleText1()"> 
     <div id=one_one class="text" >Show More</div>
     <div id=one_two class="text" style="display:none">Show Less</div>
      </div>
  </div>
  <div class="item">
    <div id=two style=display:"none" class="item-content" onclick="toggleText2()">
     <div id=two_one class="text" >Show More</div>
     <div id=two_two class="text" style="display:none">Show Less</div>
    </div>
  </div>
  <div class="item">
    <div id=three style=display:"none" class="item-content"></div>
  </div>
</div>