classList.toggle() 仅应用于最后一项

Question

我正在将循环中的事件监听器应用到下拉菜单，但无论单击哪个项目，只有最后一个项目 class 被切换。

$(document).ready(function(){
            var item = document.querySelectorAll('#dropdown .hasSubMenu');
            var len = item.length;

            for (var i = 0; i < len; i++) {
                var items = item[i];
                var menuItem = items.querySelector('.filter');

                menuItem.addEventListener('click', function() {
                    items.classList.toggle('open');
                });
            }
        });

class 'open' 仅添加到循环中的最后一项。我做错了什么？

Answer 1

here的回答帮我改正了错误。我不知道 let, var, 等之间存在差异。所以在所有优秀的解决方案中，我选择将所有变量从 var x 更改为 let x。这就是我解决问题的方法。

classList.toggle() 仅应用于最后一项

classList.toggle() is being applied only to last item

jquery

for-loop

addeventlistener