JSFiddle - React, Tailwind, and code Playground

by hungqh87

HTML

<div id=boxes>
    <div id=box1>box1</div>
    <div id=box2>box2</div>
    <div id=box3>box3</div>
    <div id=box4><span class="childbox">Box4</span></div>
</div>

CSS

#boxes{
      width: 200px;
      height: 350px;
  }
  #box1{
      width: 40px;
      height: 35px;
      background-color: red;
  }
  #box2{
      width: 40px;
      height: 35px;
      background-color: yellow;
  }
  #box3{
      width: 40px;
      height: 35px;
      background-color: blue;
  }
  #box4{
      width: 60px;
      height: 35px;
      padding: 5px 10px 5px 10px;
      background-color: green;
  }
  .childbox{
      background-color: yellow;
      padding: 2px;
  }

JavaScript

$('#boxes').on('click', function(event) {
  var current = $(event.target).attr('id');
  var result = 'ID là ' + current
  if (typeof current == typeof undefined && current == null) {
  	current = $(event.target).attr('class');
    result = 'Class là ' + current
  }
  alert(result);
});

//Bạn có thể dùng phương thức on() thay cho phương thức .bind()

/* $('#boxes').on('click', function(event) {
  var current = $(event.target).attr('id');
  if (typeof current == typeof undefined && current == null)
    current = $(event.target).attr('class');
  alert(current);
}); */