你好。我试图点击div的所有元素，但它现在有效

Question

我尝试点击所有div，但事件适用于最后一个div。如何为每个div调用函数？ 我想要为这个点击javascript调用函数的div。

<svg height="300" width="300" class="centerization">
    <style>
        .es{
            margin-top: 30px;
        }
        .es:hover {
            cursor: pointer;
        }
    </style>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es"> 
    </rect>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
    x="100"></rect>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
    x="200"></rect>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
    y="100"></rect>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
    y="100" x="100"></rect>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
    y="100" x="200"></rect>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
    y="200"></rect>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
    y="200" x="100"></rect>
    <rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
    y="200" x="200"></rect>
</svg>

var svg = document.getElementsByClassName("es");
for (var property in svg) {
    svg[property].addEventListener("click",function(){
        alert("clicked"+svg[property]);
    });
};

Answer 1

getElementsBy *方法返回HTMLCollections，这可能很难处理。请考虑使用querySelectorAll，它返回一个静态NodeList - 与HTMLCollection不同，它可以直接迭代，在迭代时不会改变，而且它更灵活。

document.querySelectorAll('.es')
  .forEach((es) => {
    es.addEventListener('click', () => alert('clicked ' + es.outerHTML));
  });

.es {
  margin-top: 30px;
}

.es:hover {
  cursor: pointer;
}

<svg>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es">
</rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" x="100"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" x="200"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" y="100"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" y="100" x="100"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" y="100" x="200"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" y="200"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" y="200" x="100"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" y="200" x="200"></rect>
</svg>

Answer 2

您需要将click事件添加到svg数组的每个元素。您可以使用简单的for循环：

var svg = document.getElementsByClassName("es");
for(var i=0; i<svg.length; i++) {
   svg[i].addEventListener("click",function(){
       alert("clicked");
   });
};

.es{
    margin-top: 30px;
}
.es:hover {
  cursor: pointer;
}

<svg>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es"> 
</rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
x="100"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
x="200"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
y="100"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
y="100" x="100"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
y="100" x="200"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
y="200"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
y="200" x="100"></rect>
<rect height="40" width="80" fill="blue" rx="5" ry="5" class="es" 
y="200" x="200"></rect>
</svg>