Question

我正在尝试为我的网站制作一个基本的JS文件，这就是它需要做的事情。我需要它用classname'program'来挑选所有div，并且根据哪个'program'被覆盖，执行一个对该元素唯一的动作。这是可能的，还是我必须在更具体的步骤中移动并转到定位唯一ID或数据属性？

到目前为止我唯一能做的就是：

var programs = document.getElementsByClassName('program');

这是为了获得DOM中出现的所有“程序”的“数组类似”列表。然后我想要一个悬停功能，根据哪个'程序'悬停，程序[0]，程序[1]，程序[2]或程序[3]，执行特定操作。

请不要jQuery！

Answer 1

可能有很多方法可以执行此操作，但您可以使用EventListener来实现此目的。

这是如何做到的：

var x=0;//global variable

    document.addEventListener('DOMContentLoaded',function(){    
    var programs = document.getElementsByClassName('program');

        for(var i=0;i<programs.length;i++){
            programs[i].addEventListener('click',someFtn);
            x=i;
        }

        function someFtn(event){
           console.log(this.id); //it will give you the ID of clicked program
           console.log(x);  // tells which 'i' it was
        }
    });

P.S：以上是Click事件的简单解决方案，请自行尝试Hover事件。这很容易。

Answer 2

使用.querySelectorAll - https://developer.mozilla.org/en/docs/Web/API/Document.querySelectorAll

使用getElementsByTagName +遍历的老派方法（仅建议用作polyfill）

Answer 3

当＆＃34;程序＆＃34>时，你可以使用onmouseoverevent执行一些javascript。元素徘徊。

var programs = document.getElementsByClassName('program');
for(var ctr = 0; ctr<programs.length; ctr++)
{
    programs[ctr].onmouseover=function(sender){
        //some action on hover here
        alert("id of element hovered: " + sender.target.id);
    };
}

请参阅fiddle

编辑：为每个元素添加了唯一要求，使用ID作为示例

Answer 4

使用可以直接附加到DOM元素的事件处理程序，Javascript支持DOM元素的MouseOver。

首先使用document.getElementsByClassName功能：http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

其次，附上每个项目onmouseover功能：http://www.w3.org/TR/html401/interact/scripts.html#adef-onmouseover

或者作为替代方案，如果它本质上风格CSS也使用鼠标悬停处理：悬停参考：http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:hover

祝你好运！

悬停时的JavaScript执行对元素唯一的操作

4 个答案: