Question

我正在编写一些vanilla 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的答案。

Answer 1

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");
    }
}

Answer 2

在您的代码段中，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);

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

Check the fiddle here

Answer 3

这是一个从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;
};

Answer 4

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"); } }

Answer 5

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"); 
});

Answer 6

我喜欢使用各种自定义的“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，则必须记住使用它设置的任何内容将覆盖以前的值。

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

Answer 7

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

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;

}

使用JavaScript添加类

7 个答案:

Check the fiddle here