$(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 中$(this).index与$.each的使用指南
10-25
例如，在一个动态的选项卡切换效果中，我们可能先使用 $(this).index() 快速定位到被点击的元素索引，然后利用 $.each() 对其它元素进行批量处理。通过这种结合使用，可以实现更加灵活和复杂的 UI 交互效果。 另外...
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 属性，如需添加多个类，使用空格分隔类名。当样式发生冲突时，样式权值高者获胜；当样式权值相同时，后定义者获胜。.........
// 创建文件项 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方法...
$(function(){ // 初始化指示点 const $slides = $('.slide'); const $pagination = $('.pagination'); $slides.each(function(index){ const num = (index + 1).toString().padStart(2, '0'); $pagination.append(` <div class="pagination-item" data-index="${index}">${num}</div> `); }); // 自动播放 let current = 0; let timer = setInterval(autoPlay, 3000); function autoPlay(){ const next = (current + 1) % $slides.length; switchSlide(next); } // 指示点点击 $('.pagination-item').click(function(){ const index = $(this).data('index'); switchSlide(index); resetTimer(); }); // 切换函数 function switchSlide(target){ const $activeSlide = $('.slide.active'); const $targetSlide = $slides.eq(target); const direction = target > current ? 'left' : 'right'; // 幻灯片切换 $slides.removeClass('active'); $targetSlide.addClass('active'); $('.slides').css('transform', `translateX(-${target * 100}%)`); // 文字介绍切换 const $activeCaption = $('.caption.active'); const $targetCaption = $('.caption').eq(target); $activeCaption.animate({left: direction === 'left' ? '-100%' : '100%', opacity: 0}, 500); $targetCaption.css('left', direction === 'left' ? '100%' : '-100%').animate({ left: 0, opacity: 1 }, 500).addClass('active'); // 更新指示点 $('.pagination-item').removeClass('active'); $('.pagination-item').eq(target).addClass('active'); current = target; } // 重置定时器 function resetTimer(){ clearInterval(timer); timer = setInterval(autoPlay, 3000); } });这段代码有bug 修改一下
最新发布
04-03
这里可能存在一个问题：当切换到最后一张时，是否能够正确回到第一张？但取模运算应该没问题。 指示点点击事件中，获取index并调用switchSlide(index)，然后重置定时器。这部分可能的问题在于事件绑定的时机。因为...
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
10-15
`addClass`方法允许我们向一个或多个元素添加指定的CSS类。在示例1中，当鼠标悬停在id为`d`的`div`元素上时，使用`mouseover`事件触发`addClass`方法，将`.a`类添加到该元素。`.a`类定义了一个绿色背景，因此当鼠标...
$(this).prevAll().addClass('hs');
03-31
然后是`.addClass('hs')`，这部分应该就是给选中的元素添加一个名为`hs`的CSS类。这样这些元素的样式会被改变，如果用户定义了`.hs`的样式的话。 结合起来，整个代码的作用应该是选中当前元素之前的所有同级元素，...
【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-.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值