ExtJs 实现点击修改DOM样式增删clssName-优快云博客

本文介绍如何使用ExtJS和jQuery实现点击元素时切换样式的效果。具体包括遍历具有特定类名的对象并移除该类名，以及为被点击的对象添加类名。通过这种方式可以轻松实现选中状态的切换。

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

实现效果图如下：

如图，就是实现点击之后给对象添加一个样式（add一个className），同事删除其它对象的这个类名（通过className查找对象，再remove这个className）。

实现难点如下：

1、如何通过className遍历对象

可参考: ExtJs 获取Dom对象

2、如何用ExtJs进行DOM操作

可参考:ExtJs中如何实现点击之后修改类名（class）

实现代码如下：

<pre name="code" class="javascript"> clickFn:function(){
            for (var i = 0; i < Ext.select(".interviewMenuListItemSelected").elements.length; i++) {
                var selectedId = Ext.select(".interviewMenuListItemSelected").elements[i].id;
                var selectedCmp = Ext.getCmp(selectedId);
                selectedCmp.removeClass("interviewMenuListItemSelected");
            };
            this.addClass("interviewMenuListItemSelected");
            
           alert("nothing");
        }

补充：

用jQuery实现更方便！遍历+移除样式一步解决！

$(".interviewMenuListItemSelected").removeClass("interviewMenuListItemSelected");

this.addClass("interviewMenuListItemSelected");

转载于:https://www.cnblogs.com/fifteen718/p/9533938.html