如何使用$this实现类名添加/移除及对应父元素的类名激活

你需要的是排他性的激活效果——点击任意按钮时，仅让该按钮的父元素拥有nwe-active类，其他同类型父元素自动移除这个类。可以按以下方式修改你的JavaScript代码：

$(".nwe-cl-icontext").click(function () {
  // 移除所有.nwe-cl-c元素的nwe-active类
  $(".nwe-cl-c").removeClass("nwe-active");
  // 给当前点击按钮的父元素添加nwe-active类
  $(this).parent().addClass("nwe-active");
});

或者更高效的写法（利用兄弟元素选择，减少重复DOM查询）：

$(".nwe-cl-icontext").click(function () {
  const parentEl = $(this).parent();
  // 给当前父元素添加类，同时移除所有兄弟元素的该类
  parentEl.addClass("nwe-active").siblings(".nwe-cl-c").removeClass("nwe-active");
});

完整代码示例 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nwe-g-m">
    <div class="nwe-cl-c nwe-active">
        <div class="nwe-cl-icon-m is"></div>
        <div class="nwe-cl-icontext">btn1</div>
    </div>

    <div class="nwe-cl-c">
        <div class="nwe-cl-icon-m is"></div>
        <div class="nwe-cl-icontext">btn2</div>
    </div>

    <div class="nwe-cl-c">
        <div class="nwe-cl-icon-m is"></div>
        <div class="nwe-cl-icontext">btn3</div>
    </div>
</div>

CSS

.nwe-cl-c.nwe-active {
background: red;
}

.nwe-cl-c {
background: green;
padding: 10px;
margin: 5px 0;
cursor: pointer;
}

JavaScript

$(".nwe-cl-icontext").click(function () {
  $(this).parent().addClass("nwe-active").siblings(".nwe-cl-c").removeClass("nwe-active");
});

内容的提问来源于stack exchange，提问作者CoreTM