基于值从数组中移除元素的交互逻辑实现问题

需求回顾 #

• 点击Toyota、Mazda、Nissan任意按钮时，若makeArr数组中存在"All"，则将其移除
• 点击"All"按钮时，若数组中存在Toyota、Mazda、Nissan这些元素，需全部移除

问题分析 #

你之前在else分支尝试的makeArr.splice($.inArray("All", makeArr), 1);未生效的原因是：当数组中不存在"All"时，$.inArray返回-1，此时splice(-1,1)会错误地移除数组最后一个元素，而非什么都不做。此外，点击"All"时缺少移除单个品牌的逻辑。

修正后的代码 #

var makeArr = [];
const singleBrands = ["Toyota", "Mazda", "Nissan"]; // 统一管理单个品牌集合

$(".btn-primary").on("click", function() {
  let make = $(this).data('make');
  
  if (make === "All") {
    // 移除所有单个品牌元素
    makeArr = makeArr.filter(item => !singleBrands.includes(item));
    
    const allIdx = $.inArray("All", makeArr);
    if (allIdx === -1) {
      makeArr.push("All");
    } else {
      makeArr.splice(allIdx, 1);
    }
  } else {
    // 仅当"All"存在时才移除它
    const allIdx = $.inArray("All", makeArr);
    if (allIdx !== -1) {
      makeArr.splice(allIdx, 1);
    }
    
    const brandIdx = $.inArray(make, makeArr);
    if (brandIdx === -1) {
      makeArr.push(make);
    } else {
      makeArr.splice(brandIdx, 1);
    }
  }
  
  console.log(makeArr);
});

HTML部分保持不变：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container p-2">
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary" data-make="Toyota">Toyota</button>
    <button type="button" class="btn btn-primary" data-make="Mazda">Mazda</button>
    <button type="button" class="btn btn-primary" data-make="Nissan">Nissan</button>
    <button type="button" class="btn btn-primary" data-make="All">All</button>
  </div>
</div>

关键修改说明 #

1. 单个品牌点击逻辑：先判断"All"是否存在于数组中，仅当存在时才执行移除操作，避免了无意义的数组修改
2. All按钮点击逻辑：使用filter方法一次性过滤掉所有单个品牌元素，再处理"All"自身的添加/移除，确保互斥逻辑完全生效
3. 新增singleBrands常量，统一管理单个品牌列表，后续新增品牌只需修改这个数组即可，提升代码可维护性

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