Get Element für Klasse, Ziel alle Elemente auf Seite mit Klassenname

Question

Ich versuche, verschiedene Projektstufen innerhalb einer Pipeline zu zeigen. Wenn der Benutzer auf jeder Stufe der Pipeline schwebt, ändert sich die Rahmenfarbe der Projekte in dieser Phase, um sie hervorzuheben. Ziemlich einfach.

Nun, ich kann nicht scheinen, um alle Elemente in der Klasse auf dieser Seite zu zielen, es ist nur mich eine mit [0] Ziel. Aber ich brauche es, um alle divs innerhalb dieser Klasse zu bekommen, nicht nur 1. Scheint wie eine einfache Lösung, aber ich kann nichts darüber finden.

<script> 
function scanSHOW() { 

    document.getElementsByClassName('scan-item')[0].style.border="2px #FF0000 solid";} 

function scanHIDE() { 

document.getElementsByClassName('scan-item')[0].style.border="2px #666666 solid";} 

    </script> 


<style>.scan-item {border: 2px #666666 solid;}</style> 

HTML:

<img id="pipes" src="pipeline.png" usemap="#pipeline" width="483" height="221"> 

<map name="pipeline"> 
    <area shape="rect" coords="1,69,66,221" href="#" onMouseOver="scanSHOW();" onMouseOut="scanHIDE();" alt="Scan" title="Scan"> 

</map> 

<br/> 

<div class="scan-item block"></div> <div class="scan-item block"></div> <div class="scan-item block"></div> <div class="scan-item block"></div> 

Answer 1

Dies ist genau das, was Schleifen sind für. Eine einfache for Schleife, die nacheinander durch jedes Element läuft, würde den Trick machen. Etwas wie:

var elements = document.getElementsByClassName('scan-item'); 
for (var i = 0; i < elements.length; i++) { 
    elements[i].style.border="2px #FF0000 solid"; 
}