如何对js添加的类进行操作？

Posted 2023-03-14

例如：
document.querySelector('.manage1').addEventListener('click',function()
document.getElementById('manage').classList.remove('manage1');
document.getElementById('manage').classList.add('manage2');
document.getElementById('box').classList.add('addr-add');
);
document.querySelector('.manage2').addEventListener('click',function()
document.getElementById('box').classList.remove('addr-add');
document.getElementById('box').classList.add('addr-delete');
);
就是要（1）div.manage1点击时添加类manage2、去掉manage1，#box添加类addr-add；（2）再点击div.manage2时，＃box添加类addr-delete、去掉addr-add
但是后一个点击事件就没有执行，为什么？该怎么操作呢？

因为`.manage2`样式是在事件中添加到#manage元素的，第二段代码执行时该元素尚未被赋予.manage2样式， 所以获取不到这个元素也没添加有效的事件。

看你这段代码， .manage1、.manage2应该都是id为manage的元素，

 首先能用ID获取就不要用样式获取， 因为ID获取元素的效率最快。

 其次， 同一元素多次被使用时， 用变量暂存， 

代码更改如下， 如果不对， 请上传相应的html：

var box = document.getElementById('box'),
    boxClassList = box.classList;
    manage = document.getElementById('manage'),
    manageClassList = manage.classList;

manage.onclick = function()
    manageClassList.remove('manage1');
    manageClassList.add('manage2');
    boxClassList.add('addr-add');
    manage.onclick = function()
        boxClassList.remove('addr-add');
        boxClassList.add('addr-delete');
    
;

追问

OK了，高手啊，非常感谢。
manage.onclick里面再写manage.onclick，还没想到这种写法，我的js也没什么基础。
“因为`.manage2`样式是在事件中添加到#manage元素的，第二段代码执行时该元素尚未被赋予.manage2样式， 所以获取不到这个元素也没添加有效的事件。”－－这个

追答

OK请采纳！
看你原来的代码：
manage2样式是在事件方法里添加到#manage的 当代码执行到第二段时， 还没有执行事件方法， document.querySelector('.manage2')是获取不到你想要的元素的。

参考技术A

问题在于：

   还没有添加manage2的时候，querySelector('.manage2')是找不到dom节点的，也就是无法添加监听事件，所以不生效。

修改方法：

document.getElementById('manage').addEventListener('click',function()
     if(!document.querySelector('.manage2'))//查看是否找到了manage2 
       document.getElementById('box').classList.remove('addr-add');
     document.getElementById('box').classList.add('addr-delete');
     else if(!document.querySelector('.manage1'))//查看是否找到了manage1 
       document.getElementById('manage').classList.remove('manage1');
     document.getElementById('manage').classList.add('manage2');
     document.getElementById('box').classList.add('addr-add');
     
  );

参考技术B 没有报错吗，你看浏览器报错信息吧，追问

document.querySelector('.manage2').addEventListener('click',function()

这一行显示报错：
Uncaught TypeError: Cannot read property 'addEventListener' of null

追答

一上来没有'.manage2'这个，浏览器就会报错，你点击了才有这个，你的这个代码本身就有问题