大家帮忙看看这段代码为什么一直提示错误

Question

我查了好久都没发现那里有不对

var arr = $(".menu-bottom").find("li");
         //alert(arr.length)
        $(".menu-bottom").find("li").click(function(){

            
            for(var i = 0;i<arr.length;i++){
                  if(arr[i].hasClass("on")){  //这个地方老是报错。。。。
                       arr[i].removeClass("on");
                  }
            }
            $(this).children("div").find("div").addClass("on");
        })

Answer 1

'arr[i]'不是 jQuery 对象，要用 'arr.eq(i).hasClass()'。

Answer 2

为什么要在里面写个循环。。。

    var li = $(".menu-bottom").find("li");
    li.click(function(){
        li.removeClass("on")  //直接都移除 就好了
        $(this).children("div").find("div").addClass("on");   //然后再添加
    })

Answer 3

这段代码可能是如闭包引起的，你再for循环的第一行打印一下i看他每次输出是不是都是一样的。

Answer 4

var arr = $(xxxxx)，用的 jquery?
那么 arr[i] 是一个 dom ，没有 hasClass 方法
可以用 arr.eq(i).hasClass()

Answer 5

Jquery已经帮你全部绑定了而你还多此一举。。不用做循环

Answer 6

arr.each(function (item) {
    if ($(this).hasClass('on') {
        $(this).removeClass('on')
    }
})

Answer 7

其实完全没必要用if来判断有没有，直接去移除就好了，如果没有打电话，会自动掠过，还有，感觉这代码也不用jq来写的吖…原生js能完美胜任的

Answer 8

既然 arr 是一个 jQuery 对象，那比较推荐的遍历是用 arr.each()

arr.each(function() {
    var el = $(this);
    if (el.hasClass("on")) {
        el.removeClass("on");
    }
});

但是仍然有三个地方需要改进

1. removeClass 之前没必要去判断一下，反正如果没有也不会有啥效果。

2. 既然 ES6 已经出来这么久了，考虑兼容 ES6 的 Lambda 写法，不用 $(this)，改用参数

好简洁的写法

arr.each((i, el) => $(el).removeClass("on"));