有关js改变class或remove掉class之后，原class绑定事件依旧存在的问题

最新推荐文章于 2023-02-17 15:29:59 发布
最新推荐文章于 2023-02-17 15:29:59 发布
阅读量5.6k 收藏
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38055667/article/details/79027052
版权

      今天在进行前端js（jquery）编写的时候需要在多个部分做关联事件，于是想到了不同阶段给予不同的class来进行事件委托，但是一切做完之后，发现改变或删除元素class之后，依旧会保持原class的绑定事件。就已经对页面上该元素绑定相关监听事件了，而不是你点击的时候才去匹配的，所以即使你后来改了，监听事件还是依然能够生效。



       这个时候你可以在你最初的事件上进行分支判断，判断是否有某个class（hasClass）来进行不同的处理；



芥焉丶
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery UI 实例 - 移除 Class（Remove Class）
unber的博客
04-14 349
当动画样式改变时，为匹配的元素集合内的每个元素移除指定的 Class。如需了解更多有关方法的细节，请查看 API 文档。
关于Class类
jen_wu的博客
06-19 182
我们知道在Java中，一个类在被加载的时候虚拟机就会自动的生成一个这个类的一个Class类型的“类对象”，每个类都对应着一个这样的类对象，通过这个Class类型的类对象，我们就能够使用“内省与反射”机制，访问一个类的信息，比如：对应类中的方法有哪些，成员域有哪些等等；获取一个类的“类对象”的方法之一就是通过使用   类名.class  这个方式返回一个Class类型的对象，其他的获取这个Cla
JS30-01:打击鼓---JS选择器、JS原生增加and移除class样式、事件监听、data-自定义属性、模板字符串、播放音频
weixin_44817062的博客
07-07 289
JS30-01:打击鼓—JS选择器、JS原生增加and移除class样式、事件监听、data-自定义属性、模板字符串、播放音频 一、JS选择器 const key = document.querySelector(`div[data-key = "${e.keyCode}"]`); const keys=document.querySelectorAll('.key') 二、给元素增加、移除class样式的两种方法： 1、元素的classList属性，用来存放所有的class属性值 conso
面向对象 析构方法 销毁对象时自动触发
guohao326的博客
09-25 865
<?php header("Content-Type: text/html; charset=utf-8"); class person{ public $name; public $age; public $sex; /* * 可以有默认值 $s = 男 */ public function __construct($n,$a,$s="男"){ $this -> name
ES6 Class类 事件的注册与销毁
^Being^
02-17 1145
ES6 中使用 Class 语法糖，处理事件监听器的注册(addEventListener)和销毁(removeEventListener)时，其中遇到的、或者说需要注意的一些问题(如：注册事件无法销毁)及解决方案。
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
01-21
HTML绑定事件,加入或者移出class为active <div class=col-lg-3 v-on:mouseover=changeActive($event) v-on:mouseout=removeActive($event)> 流量套餐 JS 这里除了active这个class需要动态添加或者减去,其他的皆...
jquery 新建的元素事件绑定问题解决方案
10-25
在JavaScript和jQuery中，事件绑定通常是在DOM加载完成（即`$(document).ready()`或简写为`$(function() {})`）时进行的。然而，当动态创建新的DOM元素时，这些新元素不会自动继承已经定义的事件处理器。标题提到的...
Data-interactives-class
06-27
4. **JavaScript插件**：Bootstrap还包含了一些JavaScript插件，如模态框(`modal.js`)，滚动监听(`scrollspy.js`)和轮播(`carousel.js`)，这些都可以通过简单的数据属性或JavaScript方法启用。 **结合使用jQuery和...
原生JS实现的轮播图功能详解
10-18
在本篇文章中，我们将深入探讨如何使用原生JavaScript实现轮播图功能，这是一种常见的网页动态效果，用于展示一组图片或内容。轮播图通常具备自动切换、手动切换、以及指示器等功能，使得用户能够轻松浏览多张图片。...
原生JS实现京东同款轮播图
最新发布
08-07
在本文中，我们将深入探讨如何使用原生JavaScript（JS）来实现京东同款的轮播图效果。轮播图是网页设计中常见的元素，用于展示多张图片或内容，通过自动切换或者用户交互来实现动态浏览。京东的轮播图通常具有平滑...
JS进阶之面向对象ES6-class类
欢迎访问我的主页：https://www.bookbook.cc
11-05 8769
JS进阶之面向对象ES6-class类，面向对象OOP
addClass(““).delay().removeClass(““)；没有效果的解决方式
滕青山博客
09-26 2230
来令某个元素显示一段时间后再隐藏，一般可以用于提示信息。运行发现并没有效果。
一篇文章带你搞懂JS对象的自我销毁
weixin_34195546的博客
05-09 3723
在日常的JS组件开发中，往往会有一些较为复杂的DOM操作及事件监听，尤其是在处理UI层面的widgets时候更为明显。常常会花很多精力在对象的init上，而当组件需要被移除时则仅仅是把所在DOM草草的remove掉就算完事儿。 当然，绝大多数情况这样处理并没有什么不妥，因为事件监听时仅仅局限于所属的DOM自身，移除DOM后，只要对象的外部引用不再维系，相关的内存占用很快就会被当作垃圾回收掉（本文不...
前端----通过js给相同class的元素添加事件
热门推荐
nO0b
10-10 2万+
写网页时我们可能一组元素增加一个相同的事件, 比如下图的下拉菜单中每项都有一个鼠标悬停事件和鼠标悬出事件(onmouseover和onmouseout事件) 不会的同学可以看看介绍这两个事件的一个小实例博客 https://blog.csdn.net/q5706503/article/details/82843997 效果很简单, 鼠标指到选项时背景色变成灰色,悬出时背景色再变白, ...
轮播图指示器动画制作，removeClass后addClass无效？用神奇的setTimeout(fn, 0)解决动画重置问题
无数_Mirage的博客
05-20 562
轮播图指示器动画制作，removeClass后紧跟addClass无效的解决办法，用神奇的setTimeout(fn,0)解决动画重置问题
vue 一个元素动态的绑定两个不同的class，然后通过js改变绑定来改变样式
06-06
可以通过对象语法来绑定多个class，例如： ```html <div :class="{ classA: isA, classB: isB }"></div> ``` 其中，`:class` 表示动态绑定class，`{}` 中的 `classA` 和 `classB` 是样式类名，`isA` 和 `isB` 是布尔值，用于判断是否需要绑定对应的样式类。 接下来，你可以通过JS来改变绑定，例如： ```javascript // 获取元素 const el = document.querySelector('.example') // 添加classA样式类，移除classB样式类 el.classList.add('classA') el.classList.remove('classB') // 切换isA和isB的值，实现样式类切换 isA = !isA isB = !isB ``` 这样就可以动态地切换绑定的样式类了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值