当所有元素具有相同的类名时，如何获取被点击元素的id？

Question

My code would be like this

<select id="id_1" class="editable-input" name="name_1">

<select id="id_2" class="editable-input" name="name_2">

<select id="id_3" class="editable-input" name="name_3">

How do I know which one is being clicked and how to get the id and name of the clicked element?

PS: I want to write the code in javascript later, because I am gonna put that code to GTM variable

Answer 1

With Plain JS + html update:

 var info = function(dd) { alert(dd.id + ", " + dd.name); }; 

 <select id="id_1" class="editable-input" name="name_1" onclick="info(this);"></select> <select id="id_2" class="editable-input" name="name_2" onclick="info(this);"></select> <select id="id_3" class="editable-input" name="name_3" onclick="info(this);"></select> 

With Plain JS:

 var info = function(dd) { return function() { alert(dd.id + ", " + dd.name); } }; var dds = document.getElementsByClassName("editable-input"); for (var i = 0, l = dds.length; l > i; i++) dds[i].onclick = info(dds[i]); 

 <select id="id_1" class="editable-input" name="name_1"></select> <select id="id_2" class="editable-input" name="name_2"></select> <select id="id_3" class="editable-input" name="name_3"></select> 

With jQuery:

 $(function() { $('select.editable-input').on('click', function(e) { alert(this.id + ", " + this.name); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select id="id_1" class="editable-input" name="name_1"></select> <select id="id_2" class="editable-input" name="name_2"></select> <select id="id_3" class="editable-input" name="name_3"></select> 

Answer 2

If you are using jQuery, you can use the following:

 $(".editable-input").on("click", function(e) {
    var sender = $(this);

    console.log(sender.prop("id"));
    //OR
    console.log(this.id);
 });

if you are using JavaScript:

 var items = document.getElementsByClassName("example"),
     currentItem;

 for(var i = items.length; i--;) {
   currentItem = items[i];
   currentItem.onclick = function(e) {
      console.log(this.id);
   };
 }

Answer 3

There are some ways of doing that, but the best way of doing it, is by delegating one single event to the parent of your children.

 var div = document.getElementById("parent"); div.addEventListener("click", function(e) { var el = e.target; // here you can get el.id and el.name and do whatever you want if (el.tagName.toLowerCase() === "select") alert(el.id); }); 

 <div id="parent"> <select id="id_1" class="editable-input" name="name_1"></select> <select id="id_2" class="editable-input" name="name_2"></select> <select id="id_3" class="editable-input" name="name_3"></select> </div> 

Doing that, you create only one event that could handle all the children you have inside the div. So, you'll use less memory, and even if you create another <select> dinamically, it would already have the event delegated to it.

Know more about event delegation .

---

And if you don't like that approach, you can always use the conventional one:

var sels = document.querySelecorAll(".editable-content");
for (var i = 0; i < sels.length; i++) {
  sels[i].addEventListener("click", function(e) {
    var el = e.target;
    // here you can get el.id and el.name and do whatever you want
  });
}