Question

我试图在管道中显示不同的项目阶段。当用户在管道的每个阶段上悬停时，该阶段中项目的边框颜色会更改以突出显示它们。很简单。

好吧，我似乎无法定位该页面上班级中的所有项目，只允许我使用[0]定位一个项目。但我需要它来获得该类中的所有div，而不仅仅是1.看起来像一个简单的修复，但我似乎无法找到任何关于此的。

    <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

这正是循环的用途。一个简单的for循环依次遍历每个元素就可以了。类似的东西：

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

Answer 2

我发现最简单的方法是在整个主体上设置一个Click侦听器，然后侦听某个类的点击。这样，您可以遍历所单击对象的dom，然后执行所需的任何操作。

function clickHandler(e){

e = e || window.event;
const target = e.target || e.srcElement;

    if (target.className.match(/CLASS NAME HERE/)) {
        //do something with the target (traverse up or down - change the element or whatever have you)
        console.log(e.target)
    }

}

if (document.body.addEventListener){
document.body.addEventListener('click', clickHandler, false);
}

ps！如果您执行for循环，那么我通常稍后会遇到问题（至少对我而言）是最可靠的。

按类获取元素，使用类名定位页面上的所有元素

2 个答案: