javascript - getElementsByClassName上的Javascript onclick事件(Javascript onclick event on getElementsByClassName)

Question

I have a svg map and I am putting that into object and I am trying to create all path with id clickable.(我有一个svg映射，并将其放入对象，并尝试创建ID为clickable的所有路径。)

For that I am doing this to get svg object :(为此，我这样做是为了获取svg对象：) let a = document.getElementById("biharsvg") And I am putting that into svg doc like this:(我将其放入svg doc中，如下所示：) var svgDoc = a.contentDocument; And now I am getting all the values of certain class using this:(现在，我使用以下命令获取某个类的所有值：) let de = svgDoc.getElementsByClassName("fil0"); I can also get the attribute id value using this:(我还可以使用以下方法获取属性ID值：) var i; for (i = 0; i < de.length; i++) { var j = de[i].getAttribute("id"); console.log(j); } I want to add a click event on each attribute id and get the value when I am doing this:(我想在每个属性ID上添加一个click事件，并在执行此操作时获取该值：) var i; for (i = 0; i < de.length; i++) { var j = de[i].getAttribute("id"); console.log(j); svgDoc.getElementById(j).onclick = function() { modal.style.display = "block"; console.log(this.getAttribute("id")); } } This is working fine and I am getting all the values but in jquery I can use this:(这工作正常，我正在获取所有值，但是在jquery中，我可以使用以下代码：) $(de).click(function(){ alert(this.getAttribute("id")); }); Is there any way I can use something like this in javascript without loop.(有什么办法可以在无循环的javascript中使用类似的方法。) My question is what is the best possible way to make this work in javascript.(我的问题是用javascript进行这项工作的最佳方法是什么。)   ask by translate from so

Answer 1

The javascript version for jQuery's(jQuery的javascript版本)

$(de).click(function(){ alert(this.getAttribute("id")); }); would be something like(会像) Array.from(de).forEach( function(el){ el.addEventListener('click', function() { alert(this.getAttribute("id")); // or "this.id" should work too }); }); To be noted, when doing $(de).click(function(){...} with jQuery, it also loops, internally.(要注意的是，当使用jQuery执行$(de).click(function(){...}时，它也会在内部循环。) And as commented, with arrow functions you could shorten the code even more(如前所述，使用箭头功能，您可以进一步缩短代码) Array.from(de).forEach(el => el.addEventListener('click', function () {...})) var de = document.querySelectorAll('span'); Array.from(de).forEach(el => el.addEventListener('click', function () { alert(this.id); })) span { display: inline-block; padding: 20px; margin: 0 5px; border: 1px dotted black; } span::after { content: attr(id) } <span id="nr1">click </span> <span id="nr2">click </span> <span id="nr3">click </span> Updated based on a comment.(根据评论进行了更新。) The main difference between your existing loop and the above is, the above is more efficient, with a cleaner/shorter code.(现有循环与上述循环之间的主要区别在于，上述循环更有效，代码更简洁/更短。) In your original loop(在您的原始循环中) var i; for (i = 0; i < de.length; i++) { var j = de[i].getAttribute("id"); svgDoc.getElementById(j).onclick = function() { modal.style.display = "block"; console.log(this.getAttribute("id")); } } you iterate through the element array de , get its id and then make a new call using getElementById to get the element you already have.(您遍历元素数组de ，获取其id ，然后使用getElementById进行新调用以获取您已有的元素。) With the kept syntax/logic, your existing code could been simplified to something like this(使用保留的语法/逻辑，可以将您现有的代码简化为以下形式) for (var i = 0; i < de.length; i++) { de.onclick = function() { modal.style.display = "block"; console.log(this.getAttribute("id")); } }