$(this).addClass()的一个注意点

最新推荐文章于 2022-12-14 13:35:42 发布
原创 最新推荐文章于 2022-12-14 13:35:42 发布 · 1.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JS #jQuery #addClass #ViewUI

本文记录了一个关于使用jQuery中addClass方法的常见误区：连续调用时类名被拼接而非覆盖的问题，导致元素类名出现预期之外的情况。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天在该公司项目里的一个bug时发现$(this).addClass("a");后再进行一次$(this).addClass("b")，则this元素的class为“a b”；，今天这个bug就是因为这个搞的许久。唉，写出来，让自己长长记性。

.addClass() 方法详解
froginwe11的博客
06-27 316
方法是jQuery库中的一个成员，它允许开发者向一个或多个元素添加一个或多个类。这个方法可以接受一个字符串参数，该参数包含一个或多个由空格分隔的类名。方法是jQuery中一个非常有用的DOM操作方法，它可以帮助开发者轻松地向元素添加CSS类。通过理解其用法和参数，你可以更有效地使用这个方法来控制页面元素的样式，从而提升你的Web开发技能。
jquery 单击选中 再次选中取消选中
07-16 534
$(this).addClass('class')：为当前元素添加'class'类（供选择器使用 - - ） $(this).siblings('class')：查找当前元素的所有类名为 "class" 的所有同胞元素，也就是有相同类名的同胞元素。（同胞就是拥有相同的父元素） $(this).removeClass('class')：为当前元素去除'class'类，与addClass作用相...
$(this).addClass(‘class‘).siblings(‘class‘).removeClass(‘class‘)的作用
木落
05-10 2045
$(this).addClass(‘class’)：为当前元素添加’class’类（供选择器使用 - - ） $(this).siblings(‘class’)：查找当前元素的所有类名为 “class” 的所有同胞元素，也就是有相同类名的同胞元素。（同胞就是拥有相同的父元素） $(this).removeClass(‘class’)：为当前元素去除’class’类，与addClass作用相反 $(this).addClass(‘class’).siblings(‘class’).removeClass(‘c
jQuery中addClass不起作用
weixin_30662539的博客
09-13 971
1、当用jQuery给其中的i追加样式时 $(this).addClass('active').siblings().removeClass('active'); .active的中和cont重复的样式不起作用 <div class="imgId"> <i class="cont">1</i> <i ...
细看jQuery——addClass()
qq_35928228的博客
06-07 1375
对于一般人来说，只要可以使用jQuery已经封装好的函数来达到目的即可。但是对于一名想要不断突破的你来说，是需要一番功夫去探究其内部是如何运行的，如此才能在前行的路上无论遇到什么困难都可以解决。 话不多说，让我们开始细看addClass()函数在jQuery内部是如何的进行的吧。 对jQuery有一定了解的人必定知道addClass（）函数的便利，它可以只用简简单单的一行代码从而对某个标签添加
jq中的addClass()方法与样式冲突
taotu_tao的博客
08-27 1169
添加类样式方法addClass()可以向被选元素添加指定的类名，但是该方法仅仅只是在原有基础上添加属性，不会覆盖已存在的 class 属性，如需添加多个类，使用空格分隔类名。当样式发生冲突时，样式权值高者获胜；当样式权值相同时，后定义者获胜。.........
【jquery】给元素addClass并绑定点击事件，点击事件不生效的解决办法
qing_小诺的博客
09-19 4178
问题还原： 现有一个div，我们在点击时，把原来class给去掉，并给它添加一个新的class，然后监听这个新的class的点击事件，但是没生效。 代码如下： <body> <div class="open">展开</div> <script> $(".open").click(function () {//展...
jQuery添加class样式，移除同胞的class样式
Naughty_Fairy的博客
11-01 5009
实现效果：点击模块为当前元素添加class，同时移除其他三个元素的class $('#headnav li').click(function() {             $(this).addClass('current-menu').siblings().removeClass('current-menu');         }) } 即给id为headnav下的li添加cl...
解决addClass不起作用的小妙招
huakaiwuxing的博客
07-26 6973
今天遇到了这么一个问题，同样的写法，实在是找不出来为什么其中一个标签的addClass无法实现； 最后发现了这么一个方法，这才是最重要的 当点击事件后，获取到this然后给他添加class； 起初是用的$(this)我也打印了，可以正确获取到标签无误，但addClass就是无法实现； 后来改用了$("span",$(this)) 注：this这个标签即是span...
java this class_Java中的5种Class
weixin_39767124的博客
02-16 431
在浏览FeignClientsRegistar对于向容器注册有@FeignClient注解的对象的代码的时候，发现一个之前比较少关注到的方法,就是ClassMetadata#isIndependent。什么叫 class is independent呢？我们先看看这个方法上的注释。/*** Determine whether the underlying class is independent,...
jquery实现页面刷新后保留鼠标点击addclass的样式
sz_09的博客
05-10 761
亲测 最好用的方法： [javascript] view plain copy   "font-size:18px;">$('ul.main-menu li a').each(function(){       if($($(this))[0].href==String(window.location))           $(th
jQuery基本使用的方法
m0_67212141的博客
12-14 468
快来学习吧，原创不易，多多支持呀！每篇都是干货!
JQ基础入门（下）
qq_35508162的博客
08-30 394
今日内容介绍： 重写JS案例：省市联动、左右选择、表单校验 今日学习目标： 1.能够使用JQ为标签添加属性或样式 2.能够为指定标签添加字标签或兄弟标签 3.学会给标签绑定事件 使用jQuery完后省市二级联动 步骤分析： 第一步：确定事件（change事件），在绑定的函数里面获取用户选择的省份 第二步：创建二维数组来存储省份和城市 第三步：遍历二维数组中的省份（与用户选择的省...
jquery实现左侧菜单淡入淡出
SpringHASh的博客
02-05 429
实现效果如图 html <div class="left-nav"> <!-- 左部导航栏 --> <div class="left-nav-title"> 台区能源互联网 </div> <div class="left-nav-.
php 如何单独刷新模板,反馈一个x-admin模板的问题，点击左侧栏不会刷新右侧栏当前页面的问题，并提供解决方案。...
weixin_42515100的博客
03-28 303
在xadmin.js或者x-admin.js里面找到左侧菜单效果的函数，2.0版本的如下：//左侧菜单效果// $('#content').bind("click",function(event){$('.left-nav #nav li').click(function (event) {if($(this).children('.sub-menu').length){if($(this).ha...
小程序 解释函数调用 返回
晨晨晨的博博博客
11-15 764
解释：this指的是pages的对象this.add指的是pages下add这个对象，由于add是一个函数，所以this.add后带(),this.add这个函数可以代表示add：function这个函数，返回值return ，return后面的数可以返回this.add中console.log输出出来，但前提得赋值 如图var 和console部分，add：function后（）里的值是形参，this.add（）里的值是实参 ...
juqery addClass方法失效问题
wz13759497175的博客
02-09 9239
使用jquery的addClass方法后，样式已经成功添加，但还是没有效果，是因为新添加的样式的优先级比起原先的样式低所致。例如，原先样式如下.test div{ width: 100px; height: 100px; background: black; }改变的样式如下：.change{ background: white; }像这种原先样式带有父级的，对.t...
$(this).addClass 意思
07-13 2342
$(this).addClass 意思就是增加css样式
// 创建文件项 createFileItem() { this.$item = $(` <div class="file-item"> <div class="d-flex justify-content-between"> <span>${this.file.name}</span> <div class="btn-group"> <button class="btn btn-sm btn-secondary pause">暂停</button> <button class="btn btn-sm btn-danger cancel">取消</button> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 0%"></div> </div> <div class="status"></div> </div> `); this.$item.find('.pause').click(() => this.togglePause()); this.$item.find('.cancel').click(() => this.cancel()); $('#fileList').append(this.$item); } // 其他辅助方法 prepareChunks() { let offset = 0; while (offset < this.file.size) { this.chunks.push(this.file.slice(offset, offset + this.chunkSize)); offset += this.chunkSize; } } updateProgress() { const progress = (1 - this.missingChunks.length / this.chunks.length) * 100; this.$item.find('.progress-bar').css('width', `${progress}%`); } updateStatus(text) { this.$item.find('.status').text(text); } togglePause() { this.isPaused = !this.isPaused; this.$item.find('.pause').text(this.isPaused ? '继续' : '暂停'); if (!this.isPaused) this.uploadChunks(); } cancel() { this.isPaused = true; if (this.xhr) this.xhr.abort(); this.$item.remove(); } } // 初始化拖放功能 $(function() { const $dropZone = $('#dropZone'); const $fileInput = $('#fileInput'); // 拖放事件处理 $dropZone.on('dragover', e => { e.preventDefault(); $dropZone.addClass('dragover'); }).on('dragleave drop', e => { e.preventDefault(); $dropZone.removeClass('dragover'); }).on('drop', e => { handleFiles(e.originalEvent.dataTransfer.files); }); // 文件选择处理 $fileInput.change(e => handleFiles(e.target.files)); }); function handleFiles(files) { Array.from(files).forEach(file => { new ChunkedUploader(file); });帮我注释一下我要学习参考的
最新发布
03-09
用户可能是一个正在学习前端开发的人，特别是文件上传和分块上传的实现。他们可能想了解如何用jQuery和ES6语法来构建这个功能，以及如何管理上传过程中的暂停、取消和进度更新。 首先，我会从createFileItem方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值