Question

我有一个svg映射，并将其放入对象中，并尝试创建ID为clickable的所有路径。

为此，我这样做是为了获取svg对象：

 let a = document.getElementById("biharsvg")

我将其放入svg文档中，如下所示：

   var svgDoc = a.contentDocument;

现在我使用此方法获取某个类的所有值：

  let de = svgDoc.getElementsByClassName("fil0");

我还可以使用以下方法获取属性ID值：

var i;
for (i = 0; i < de.length; i++) {
  var j = de[i].getAttribute("id");
   console.log(j);

}

我想在每个属性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"));
    }
}

这工作正常，我正在获取所有值，但是在jquery中，我可以使用它：

 $(de).click(function(){
   alert(this.getAttribute("id"));
});

有什么办法可以在javascript中不循环使用吗？我的问题是，使用javascript进行这项工作的最佳方法是什么。

Answer 1

jQuery的javascript版本

$(de).click(function(){
   alert(this.getAttribute("id"));
});

会像

Array.from(de).forEach( function(el){
    el.addEventListener('click', function() {
        alert(this.getAttribute("id"));
        // or "this.id" should work too
    });
});

要注意的是，使用jQuery执行$(de).click(function(){...}时，它还会在内部循环。

正如所评论的，arrow functions可以使代码缩短更多

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>

根据评论进行了更新。

您现有的循环与上面的循环之间的主要区别在于，上面的循环更有效，代码更简洁/更短。

在您的原始循环中

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"));
    }
}

您遍历元素数组de，获取其id，然后使用getElementById进行新调用以获取您已有的元素。

通过保留语法/逻辑，可以将您现有的代码简化为类似的

for (var i = 0; i < de.length; i++) {
    de.onclick = function() {
        modal.style.display = "block";  
        console.log(this.getAttribute("id"));
    }
}

Answer 2

CBroe指出，我只是想展示一种替代方法，其中单击文档以检查其事件目标：

let de = Array.from(mylist.getElementsByClassName("fil0"));
document.addEventListener('click', function(e) {
  const el = e.target;
  if (de.indexOf(el) < 0) return false;
  alert(el.innerHTML);
});

<ul id="mylist">
  <li>one</li>
  <li class="fil0">two*</li>
  <li class="fil0">three*</li>
</ul>

<p>* has click event assigned indirectly</p>

这还有一个好处，就是它仅使用一个处理程序函数，并且如果将indexOf()条件更改为classList.contains()之类的东西，它甚至还可以用于尚不存在的元素。

Answer 3

我发现for..of是最方便易读的语法：

for (const element of svgDoc.getElementsByClassName("fil0")) {
  console.log(element.id);
}

getElementsByClassName上的Javascript onlick事件

3 个答案: