Question

我有一个左侧边栏菜单，其中有子菜单，我希望每个菜单项切换一个类名＆＃34;活动＆＃34;所以子菜单会打开我有CSS。

我正在使用Cluster来选择和迭代所有菜单项，并且仅适用于第一个元素，我一直在搜索，它与闭包有关，我正在尝试不同的解决方案但它不起作用。

我正在创建这个函数，所以我可以使用它来切换另一个div的类名而不是单击的那个，在这种情况下我使用和ID。

Foreground

我一直在尝试使用document.getElementsByClassName或将函数包装在另一个返回函数的函数中，而不是正常工作。

我在纯javascript中这样做，不能使用新的var toggleClassname = function (otherDiv, sameDiv) { var divToToggleClass; //are we going to use ID and toggle the classname of another div ? if (sameDiv) { divToToggleClass = this; } else { divToToggleClass = document.getElementById(otherDiv); } console.log(divToToggleClass); var className = divToToggleClass.className + ' '; if (~className.indexOf(' active ')) { divToToggleClass.className = className.replace(' active ', ''); } else { divToToggleClass.className += ' active'; } }; var MenuItemsArray = document.getElementsByClassName("classOfMyMenuItems"); for (var i = 0; i < subMenuItemsArray.length; i++) { MenuItemsArray[i].addEventListener('click', function () { toggleClassname(null, true) }, false); }我也会使用attachEvent更向后兼容（旧的IE）。

Answer 1

这个答案可能对您有所帮助：

addEventListener using for loop and passing values

如果你没有深入到你的代码中，我会说你是否尝试过它

for (var i = 0; i < subMenuItemsArray.length; i++) {
    (function () {
        var k = i;

         MenuItemsArray[k].addEventListener('click', function () { toggleClassname(null, true) }, false);
    }()); // immediate invocation
}

那应该有用。

Answer 2

问题在于，toggleClassname()函数this中的等于点击的元素。它实际上是undefined或window，具体取决于您的代码是否以严格模式运行。

与addEventListener()绑定的点击处理程序将this设置为点击的元素，因此在以下匿名函数中：

function () { toggleClassname(null, true) }

...... this的值是有问题的元素。但是，您调用toggleClassname()并且不传递对已点击元素的引用或设置其 this值。您可以使用.call()显式设置它：

function () { toggleClassname.call(this, null, true) }

进一步阅读：

使用document.getElementsByClassName - JavaScript切换Classname

2 个答案: