如何用jQuery为单个同class元素添加Active类（多网格场景）

要实现每个.grid容器内仅选中一个.size元素，同时给选中元素添加active类来修改颜色，可以按照以下步骤操作：

1. 绑定点击事件并处理单选逻辑 #

利用jQuery绑定点击事件，操作时精准定位当前元素所在的网格容器，确保仅对该容器内的选项生效：

const $size = $(".size");

$size.on('click', function() {
  // 获取当前元素所属的.grid容器
  const currentGrid = $(this).closest('.grid');
  // 移除当前网格内所有.size元素的active类
  currentGrid.find('.size').removeClass('active');
  // 给当前点击的元素添加active类
  $(this).addClass('active');
});

2. 添加CSS样式实现颜色变化 #

通过active类定义选中状态的视觉样式（颜色可按需调整）：

/* 选中状态的样式 */
.size.active {
  color: #e63946; /* 示例红色，替换为你需要的颜色 */
  /* 可选：添加其他样式增强选中视觉效果 */
  background-color: #f8f9fa;
  border-radius: 4px;
  padding: 2px 6px;
}

逻辑说明 #

• closest('.grid')能精准锁定当前点击元素所在的网格容器，确保操作不会干扰其他.grid中的选项。
• 先移除当前网格内所有.size的active类，再给点击元素添加类，保证同一网格始终只有一个选中项。

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