Question

我是javascript的新手并且无法在网上找到答案（我觉得它在外面因为这看起来非常简单，但我可能没有使用正确的搜索条件）

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

$('.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”类并更改其属性。

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

我的问题是......因为点击后选择了“项目”课程，如何在点击时获得DIV ID？（现在我硬编码div id）

谢谢。

Answer 1

使用JQuery：

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

JSFiddle Demo, with your full code
使用Pure JS：

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

JSFiddle Demo

Answer 2

感谢您的切换提示。我使用它来使我的代码工作并在框中显示不同的东西，具体取决于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>

我绝对肯定有一种更优化的方式来定义所有的切换，但正如我之前提到的，我是一个完整的新手，所以希望通过更多的修补我会想出那个。

如何在点击时获取DIV ID

2 个答案: