如何阻止再次点击元素时移除已添加的selected类

看起来你现在的需求是：点击尺寸色板时添加selected类，再次点击同一个色板时不会移除这个类，也就是一旦选中就保持选中状态（如果是单选场景的话，还能自动取消其他选项的选中）。下面给你两种常见场景的解决方案：

场景1：允许同时选中多个尺寸（仅阻止取消自身选中） #

如果你的需求是可以选多个尺寸，但点已选中的色板不会取消它的选中状态，只给未选中的添加类：

jQuery 实现 #

$('.swatch-option').on('click', function() {
  // 只有当元素没有selected类时，才添加它
  if (!$(this).hasClass('selected')) {
    $(this).addClass('selected');
  }
});

原生 JavaScript 实现 #

// 获取所有色板元素
const swatchOptions = document.querySelectorAll('.swatch-option');

swatchOptions.forEach(option => {
  option.addEventListener('click', function() {
    if (!this.classList.contains('selected')) {
      this.classList.add('selected');
    }
  });
});

场景2：单选模式（只能选一个尺寸，点击已选中的也不会取消） #

这是尺寸选择更常见的场景——只能选一个尺寸，点击任何色板都会自动取消其他已选中的，且点击当前已选中的不会取消：

jQuery 实现 #

$('.swatch-option').on('click', function() {
  // 先移除所有色板的selected类
  $('.swatch-option').removeClass('selected');
  // 给当前点击的色板添加selected类（不管之前有没有，确保选中状态）
  $(this).addClass('selected');
});

原生 JavaScript 实现 #

const swatchOptions = document.querySelectorAll('.swatch-option');

swatchOptions.forEach(option => {
  option.addEventListener('click', function() {
    // 移除所有其他色板的选中状态
    swatchOptions.forEach(opt => opt.classList.remove('selected'));
    // 给当前点击的色板设置选中状态
    this.classList.add('selected');
  });
});

原理说明 #

原来的逻辑应该是使用了toggleClass（jQuery）或者classList.toggle()（原生JS），这种方法会在"有类"和"无类"之间切换。我们只需要把切换逻辑改成仅添加类（或先清空再添加），就能实现"点击选中后无法取消"的效果。

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