36

我正在编写一些普通的 JavaScript 来创建一个漂亮的导航菜单。我坚持添加一个活跃的课程。

我通过类名而不是通过 id 获取元素。如果用 id 替换以下代码，则可以使用，但是，我需要将其应用于多个元素。

HTML

<img class="navButton" id="topArrow" src="images/arrows/top.png" />
<img class="navButton" id="rightArrow" src="images/arrows/right.png" />

JS

var button = document.getElementsByClassName("navButton");

button.onmouseover = function() {
    button.setAttribute("class", "active");
    button.setAttribute("src", "images/arrows/top_o.png");
}

请不要包含 jQuery 的答案。

4

7 回答 7

45

document.getElementsByClassName返回一个节点列表。因此，您必须遍历列表并将事件绑定到各个元素。像这样...

var buttons = document.getElementsByClassName("navButton");

for(var i = 0; i < buttons.length; ++i){
    buttons[i].onmouseover = function() {
        this.setAttribute("class", "active");
        this.setAttribute("src", "images/arrows/top_o.png");
    }
}
于 2013-07-30T10:45:59.787 回答
7

在您的代码段中，button是 的一个实例NodeList，您不能直接将事件侦听器附加到该实例，也不能直接更改元素的className属性。
您最好的选择是委托活动：

document.body.addEventListener('mouseover',function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'img' && target.className.match(/\bnavButton\b/))
    {
        target.className += ' active';//set class
    }
},false);

当然，我的猜测是active一旦事件触发就需要删除该类mouseout，您可能会考虑为此使用第二个委托人，但您也可以将事件处理程序附加到具有active该类的一个元素：

document.body.addEventListener('mouseover',function(e)
{
    e = e || window.event;
    var oldSrc, target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'img' && target.className.match(/\bnavButton\b/))
    {
        target.className += ' active';//set class
        oldSrc = target.getAttribute('src');
        target.setAttribute('src', 'images/arrows/top_o.png');
        target.onmouseout = function()
        {
            target.onmouseout = null;//remove this event handler, we don't need it anymore
            target.className = target.className.replace(/\bactive\b/,'').trim();
            target.setAttribute('src', oldSrc);
        };
    }
},false);

这段代码还有一些改进的空间，但我不会在这里获得所有的乐趣;-)。

在这里检查小提琴

于 2013-07-30T10:55:43.843 回答
2

这是一种改编自 Jquery 2.1.1 的方法，它采用 dom 元素而不是 jquery 对象（因此不需要 jquery）。包括类型检查和正则表达式：

function addClass(element, value) {
    // Regex terms
    var rclass = /[\t\r\n\f]/g,
        rnotwhite = (/\S+/g);

    var classes,
        cur,
        curClass,
        finalValue,
        proceed = typeof value === "string" && value;

    if (!proceed) return element;

    classes = (value || "").match(rnotwhite) || [];

    cur = element.nodeType === 1
        && (element.className
                ? (" " + element.className + " ").replace(rclass, " ")
                : " "
        );

    if (!cur) return element;

    var j = 0;

    while ((curClass = classes[j++])) {

        if (cur.indexOf(" " + curClass + " ") < 0) {

            cur += curClass + " ";

        }

    }

    // only assign if different to avoid unneeded rendering.
    finalValue = cur.trim();

    if (element.className !== finalValue) {

        element.className = finalValue;

    }

    return element;
};
于 2014-09-10T17:43:24.353 回答
0

getElementsByClassName()返回 HTMLCollection 所以你可以试试这个

var button = document.getElementsByClassName("navButton")[0];

编辑

var buttons = document.getElementsByClassName("navButton");
for(i=0;buttons.length;i++){
   buttons[i].onmouseover = function(){
     this.className += ' active' //add class
     this.setAttribute("src", "images/arrows/top_o.png");
   }
}
于 2013-07-30T10:47:01.680 回答
0

在 ECMAScript 第 5 版中，为数组构建了 forEach 循环。

var buttons = document.getElementsByClassName("navButton");

Array.prototype.forEach.call(buttons,function(button) { 
    button.setAttribute("class", "active");
    button.setAttribute("src", "images/arrows/top_o.png"); 
});
于 2013-07-30T11:01:25.680 回答
0

我喜欢为这些事情使用各种自定义的“foreach”函数：

function Each( objs, func )
{
    if ( objs.length ) for ( var i = 0, ol = objs.length, v = objs[ 0 ]; i < ol && func( v, i ) !== false; v = objs[ ++i ] );
    else for ( var p in objs ) if ( func( objs[ p ], p ) === false ) break;
}

（不记得我在哪里找到了上述功能，但它非常有用。）

然后在获取你的对象（elements在这个例子中）之后就做

Each( elements, function( element )
{
    element.addEventListener( "mouseover", function()
    {
        element.classList.add( "active" );
        //element.setAttribute( "class", "active" );
        element.setAttribute( "src", "newsource" );
    });

    // Remove class and new src after "mouseover" ends, if you wish.
    element.addEventListener( "mouseout", function()
    {
        element.classList.remove( "active" );
        element.setAttribute( "src", "originalsource" );
    });
});

classList是一种处理元素类的简单方法。只需要一些浏览器的垫片。如果你必须使用setAttribute你必须记住，任何设置它都会覆盖以前的值。

编辑：忘了提到你需要使用attachEvent而不是addEventListener在某些 IE 版本上。用 测试if ( document.addEventListener ) {...}。

于 2013-07-30T11:12:22.667 回答
0

只需在函数的开头添加一个类名，第二个和第三个参数是可选的，魔术就为你完成了！

function getElementsByClass(searchClass, node, tag) {

  var classElements = new Array();

  if (node == null)

    node = document;

  if (tag == null)

    tag = '*';

  var els = node.getElementsByTagName(tag);

  var elsLen = els.length;

  var pattern = new RegExp('(^|\\\\s)' + searchClass + '(\\\\s|$)');

  for (i = 0, j = 0; i < elsLen; i++) {

    if (pattern.test(els[i].className)) {

      classElements[j] = els[i];

      j++;

    }

  }

  return classElements;

}
于 2016-02-24T16:24:32.477 回答