Question

我有这个很棒的功能，可以像我想要的那样用纯javascript切换类：

// hasClass
function hasClass(elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}
// toggleClass
function toggleClass(elem, className) {
    var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, " " ) + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(" " + className + " ") >= 0 ) {
            newClass = newClass.replace( " " + className + " " , " " );
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    } else {
        elem.className += ' ' + className;
    }
}
document.getElementById('button').onclick = function() {
    toggleClass(this, 'active');
}

我尝试通过删除此部分将其转换为内联onclick功能：

document.getElementById('button').onclick = function() {
    toggleClass(this, 'active');
}

并添加：

onclick="toggleClass(this, 'active')"

对于我的元素，但是我想我做错了并且它根本不起作用。

有什么想法吗？

Answer 1

猜测，toggleClass不是全球性的。 onXyz属性事件处理程序只能访问全局函数。这是不使用它们的几个原因之一。

Answer 2

您正在寻找的是闭包：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#Creating_closures_in_loops.3A_A_common_mistake

此主题也可能有用：How to generate event handlers with loop in Javascript?

将js函数转换为内联onclick

2 个答案: