欢迎光临
我们一直在努力

请教一下JS DOM 代里里的两个问题 感谢大佬


本帖最后由 暗夜精灵 于 2022-8-5 08:23 编辑

请教一下JS DOM 代里里的两个问题 感谢大佬

// 获取元素列表
   let tabNav=document.querySelector(‘.tab-nav .active’)
   let aEle=document.querySelectorAll(‘.tab-nav a’)
   let tabContent=document.querySelector(‘.tab-content .active’)
  
  //  循环出
   for(let i=0;i<aEle.length;i++){
   
    // 监听鼠标移动  
    aEle中括号i.addEventListener(‘mouseenter’,function(){
      console.log(document.querySelector(‘.tab-nav .active’))
      // 删除菜单元素原有ACTIVE类
      document.querySelector(‘.tab-nav .active’).classList.remove(‘active’)这里 document.querySelector(‘.tab-nav .active’)为什么换成tabNav不起作用?
      // 增加类
      this.classList.add(‘active’) //这里this为什么换成aEle中括号i不起作用?this指的和aEle中括号i不应该一样的吗是调用函数的吗 感谢

      //下面菜单详情大图图删除类
      document.querySelector(‘.tab-content .active’).classList.remove(‘active’)
      // 每个元素添加类
      document.querySelector( `.tab-content .item:nth-child(${i+1})` ).classList.add(‘active’)

     

    })

   }

aEle不是数组吗,为什么可以aEle.addEventListener
建议再把HTML文本精简一下发出来,才好理解你的HTML层级

gzlock 发表于 2022-8-5 08:11
aEle不是数组吗,为什么可以aEle.addEventListener
建议再把HTML文本精简一下发出来,才好理解你的HTML层级 …

aEle后面又 被论坛给吞了 改成文字的了 多谢

函数执行的时候,tabNav已经不是你要的那个对象了。这个时候需要动态的取得。

千牛 发表于 2022-8-5 09:02
函数执行的时候,tabNav已经不是你要的那个对象了。这个时候需要动态的取得。 …

明白了 感谢大佬

你这个原生dom写的不累吗?用jquery也就几句代码的事,还简洁。
赞(0)
版权声明:本贴采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
帖子名称:《请教一下JS DOM 代里里的两个问题 感谢大佬》
帖子链接:https://www.moeloc.com/69934.html
此贴由用户自行发布讨论,不代表本站立场。如有违反相关法律法规请及时联系:mail.png删除
Telegram交流群:加入聊天