如何点击获得DIV ID

How to get DIV ID on click

本文关键字：DIV ID 何点击      更新时间：2023-10-31

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

我正在处理这个jfiddle中的代码：

http://jsfiddle.net/ApoG/f7qqq6k2/4/

$('.item').click(function(){
    if( document.getElementById("one").style.display != "none") {
        document.getElementById("one").style.display = "none";
    } else {
        document.getElementById("one").style.display = "block";}
    var $this = $(this),
    tileStyle = $this.hasClass('big') ? { width: 50, height: 50} : { width: 170, height: 110};
    $this.toggleClass('big');
    $this.find('.item-content').stop().animate( tileStyle );
    $container.isotope( 'reLayout' )
});

当您单击一个div时，它会获取"item"类并更改其属性。

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

我的问题是…既然"项目"类是点击选择的，我如何才能在点击时获得DIV ID？（现在我硬编码div id）

谢谢。

使用JQuery:

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

JSFiddle演示，包含完整代码
使用纯JS：

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

JSFiddle演示

感谢您的切换提示。我用它来让我的代码工作，并根据div的点击在框中显示不同的东西

以下是我最终所做的：

https://jsfiddle.net/ApoG/z3x6hqLe/

<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>

我确信有一种更优化的方式来定义所有的切换，但正如我之前提到的，我是一个完全的新手，所以希望通过更多的修补，我会找到这个。

相关文章：