[已解决]求大佬查看！js实现了一个功能另外一个实现就实现不了了

一木妄青衫

在做京东首页，然后有一个城市选择功能，要实现的功能是鼠标移入城市，下面的城市表格会出现，点击里面的城市会进行替换，同时样式红色样式会进行移动，加入这个选定的城市，
城市替换以及表格样式替换我做出来了，但是在我加入鼠标移入城市会移除隐藏类名让城市表格出现的功能后，城市替换的功能就不见了，两者无法并存。
代码放在附件里了，求大佬看看！！！

最佳答案

月排行榜 / 总排行榜

isdkz

2022-5-4 11:23:02

选择器没有选到元素，

// 城市选择
// 实现思路
// 声明变量获取表格中的a标签以及城市选择标签，给表格标签添加active，
// 给城市加入鼠标点击事件，点击之后与city进行文字更换，同时给表格内的城市添加active类名，为避免之前的表格类名依然存在，需要先进行一次全部删除
window.onload = function(){
    // 获取城市列表
    var tds = document.querySelectorAll(".citylist table a");             // 改了这里
    // 获取选定城市
    var city = document.querySelector(".city-selected")
    var hea = document.querySelector('.header-box-city > span');
    var box = document.querySelectorAll('.citylist > div');
    hea.onmouseover = function(){
        for(let e = 0;e < box.length;e++){
            box[e].classList.remove('Stealth');
        }
    }
     // 给所有td单元格添加一个点击事件
     for(let i = 0;i < tds.length;i++){
        // 批量绑定点击事件
        tds[i].onclick = function(){
            // 验证是否有绑定点击事件成功
            // console.log("我当前移入的是" + (i+1) + "城市")
            // 将表格头部文字信息替换成当前点击的对象里的内容
            city.innerHTML = this.innerHTML;
            // 当前点击的对象添加一个active
            for(let k = 0; k < tds.length;k++){
                // 先将表格里所有的单元格移出active类名
                tds[k].classList.remove('active')
            }
            console.log(this)
            this.classList.add('active')
        }
    } 
    
    
    // var wdjd = document.querySelector(".header-box-loginlist > Stealth")
    // var wdjda = document.querySelector(".dropdown > wdjdaa")
    // wdjda.onmouseover = function(){
    //     wdjd.classList.remove('Stealth')
    // }
    }

跳转到最佳答案楼层

isdkz

选择器没有选到元素，

// 城市选择
// 实现思路
// 声明变量获取表格中的a标签以及城市选择标签，给表格标签添加active，
// 给城市加入鼠标点击事件，点击之后与city进行文字更换，同时给表格内的城市添加active类名，为避免之前的表格类名依然存在，需要先进行一次全部删除
window.onload = function(){
    // 获取城市列表
    var tds = document.querySelectorAll(".citylist table a");             // 改了这里
    // 获取选定城市
    var city = document.querySelector(".city-selected")
    var hea = document.querySelector('.header-box-city > span');
    var box = document.querySelectorAll('.citylist > div');
    hea.onmouseover = function(){
        for(let e = 0;e < box.length;e++){
            box[e].classList.remove('Stealth');
        }
    }
     // 给所有td单元格添加一个点击事件
     for(let i = 0;i < tds.length;i++){
        // 批量绑定点击事件
        tds[i].onclick = function(){
            // 验证是否有绑定点击事件成功
            // console.log("我当前移入的是" + (i+1) + "城市")
            // 将表格头部文字信息替换成当前点击的对象里的内容
            city.innerHTML = this.innerHTML;
            // 当前点击的对象添加一个active
            for(let k = 0; k < tds.length;k++){
                // 先将表格里所有的单元格移出active类名
                tds[k].classList.remove('active')
            }
            console.log(this)
            this.classList.add('active')
        }
    } 
    
    
    // var wdjd = document.querySelector(".header-box-loginlist > Stealth")
    // var wdjda = document.querySelector(".dropdown > wdjdaa")
    // wdjda.onmouseover = function(){
    //     wdjd.classList.remove('Stealth')
    // }
    }

一木妄青衫

isdkz 发表于 2022-5-4 11:41
选择器没有选到元素，

为啥把<键删除了就OK了呀，这个不是选中.citylist的所有的table a元素吗？然后只改动这个位置的话替换文字还有添加active类名这个功能还是只有实现一半啊，福建这两个字歪了，然后active也没有出现在福建上面。如果我把hea这个功能代码去掉的话，文字替换这些功能都是健全的，福建也没有歪

一木妄青衫

isdkz 发表于 2022-5-4 11:41
选择器没有选到元素，

代码好像出了一点问题，我记得是福建是没歪而且有红的，我得调整一下，那请问大佬为什么去掉<代码就可以运行了

isdkz

一木妄青衫 发表于 2022-5-4 15:08
代码好像出了一点问题，我记得是福建是没歪而且有红的，我得调整一下，那请问大佬为什么去掉

因为类名为 citylist 的标签的子标签不是 table，是先到 div 再到 table 的

一木妄青衫

isdkz 发表于 2022-5-4 15:11
因为类名为 citylist 的标签的子标签不是 table，是先到 div 再到 table 的

刚刚看了一下代码，a class我写成了aclasa，类名没引入好，现在福建不歪了，类名也正常了。
所以>这个符号是代表子元素，把>去掉就是获取citylist中的全部table吗？

isdkz

一木妄青衫 发表于 2022-5-4 15:24
刚刚看了一下代码，a class我写成了aclasa，类名没引入好，现在福建不歪了，类名也正常了。
所以>这个符 ...

嗯嗯

一木妄青衫

isdkz 发表于 2022-5-4 15:30
嗯嗯

谢谢大佬