网站 › 『编程语言讨论求助区』 › 求教js如何实现监听某个class的值发生变化

苹果刺客 发表于 2021-11-15 20:23

求教js如何实现监听某个class的值发生变化

比如:
当<div class="gt_ajax_tip gt_ready"></div>的时候,js不执行函数
但是当<div class="gt_ajax_tip gt_success"></div>的时候,js执行一段函数
我尝试了if else 这样的话,只是能判断,并不能起到作用,因为初始值就是<div class="gt_ajax_tip gt_ready"></div>
当if else判断后就无法执行后续的函数了

鬼魅王子 发表于 2021-11-15 20:50

不是很理解，既然class属性会改变，那么肯定是通过某个事件改变的，既然如此需要执行的函数写到事件当中就好了，没必要一直监听class的属性是否发生改变

max2012 发表于 2021-11-15 21:01

hook div 的 class 的set方法，主要设置值就能抓住

苹果刺客 发表于 2021-11-15 21:03

鬼魅王子 发表于 2021-11-15 20:50
不是很理解，既然class属性会改变，那么肯定是通过某个事件改变的，既然如此需要执行的函数写到事件当中就 ...

因为操作gt_ready变为gt_success变化的是一个滑块验证,我的想法是当滑块验证成功后,js再执行一段代码

苹果刺客 发表于 2021-11-15 21:05

max2012 发表于 2021-11-15 21:01
hook div 的 class 的set方法，主要设置值就能抓住

你这是React的方法吗?

7R903 发表于 2021-11-15 21:13

写个定时器，判断class是否存在

鬼魅王子 发表于 2021-11-15 21:15

苹果刺客 发表于 2021-11-15 21:03
因为操作gt_ready变为gt_success变化的是一个滑块验证,我的想法是当滑块验证成功后,js再执行一段代码

我还是认为滑块验证成功也有自己的判断函数，那么在这个判断的函数之后添加自己的逻辑不就好了

banlala 发表于 2021-11-16 09:15

        const target = document.querySelector('.gt_ajax_tip');
        // 创建观察者对象
        const observer = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {
          console.log(mutation);
          });
        });
        // 传入目标节点和观察选项
        observer.observe(target,{attributes: true});

mmqwer 发表于 2021-11-16 10:17

给div加个id

slslsl 发表于 2021-11-16 10:27

楼主可以看一下vue，给div标签的class绑定一个变量，然后通过watch来监听你的这个变量值变化写触发事件就行

查看完整版本: 求教js如何实现监听某个class的值发生变化