创建一个按钮以将多个类添加到多个按钮，并在单击重置时将它们删除

Question

我有10个按钮，每个都有一个共同的类和一个独特的类。

<button type="button" class="topic btn1" data-target="desc1">Safety</button>
<button type="button" class="topic btn2" data-target="desc2">Environment</button>
<button type="button" class="topic btn3" data-target="desc3">Climate change</button>
<button type="button" class="topic btn4" data-target="desc4">Sustainability</button>
<button type="button" class="topic btn5" data-target="desc5">Business strategy</button>
<button type="button" class="topic btn6" data-target="desc6">Performance data</button>
<button type="button" class="topic btn7" data-target="desc7">Working for Shell</button>
<button type="button" class="topic btn8" data-target="desc8">Working together</button>
<button type="button" class="topic btn9" data-target="desc9">Social performance</button>
<button type="button" class="topic btn10" data-target="desc10">Human rights</button>

一个函数被应用于它，这将为每个按钮添加一个额外的唯一类。

for (let i = 0; i <= 12; i++) {
  $( ".btn" + i ).click(function() {
    $( this ).toggleClass( "act-btn" + i );
  });
}

现在我想创建两个按钮：

1. 显示全部：当有人点击此按钮时，将按相同顺序添加第三个唯一类act-btn1到act-btn10。
2. 重置：当有人点击“重置”按钮时，只会删除额外添加的类，其余类保持不变。

- Ujjawal Poonia

---

你想让它以这种方式工作，有特定的原因吗？我问这个问题是因为增量id和类属性通常是应该避免的反模式，因为它们使逻辑比必要的复杂得多且难以维护。例如，在这种情况下，您可以使用常见的类，并通过其在父容器中的索引来识别每个元素，从而实现所需的功能。 - Rory McCrossan

使用多个类而不是ID的原因是我正在创建一个设计，其中这些按钮将在移动设备上显示一个设计，并在桌面设备上显示另一个设计。 - Ujjawal Poonia

不清楚您在实现需求时遇到了什么问题。您已经有一个切换类的函数 - 您是否正在寻找.addClass和.removeClass？您是否正在寻找如何添加事件处理程序？与其仅描述您想要的内容 - 有什么具体的问题阻止您实现它？ - freedomn-m

“在移动设备中显示另一种设计，而在桌面上显示” - 这听起来像是一个XY问题，可以使用CSS的@media来完成。 - freedomn-m

只是设计不同，类和函数都是相同的。 - Ujjawal Poonia

Answer 1

$('.add').click(function() {
  for (let i = 1; i <= 10; i++) {
    $('.btn' + i).addClass( "act-btn" + i);
  }
});

$('.remove').click(function() {
  for (let i = 1; i <= 10; i++) {
    $('.btn' + i).removeClass( "act-btn" + i);
  }
});

<button class="add">Add class</button> 
<button class="remove">remove class</button>

- Nick

---

抛出错误 "addEventListener 不是一个函数" - Ujjawal Poonia

我已经更改了脚本。 - Nick

将 $('.btn-' + i).addClass( "act-btn" + i); 替换为 $('.btn' + i).addClass( "act-btn" + i); 后，它可以正常工作。 - Ujjawal Poonia

请在两个类中都进行此更改，以便我可以批准答案。 - Ujjawal Poonia

非常感谢。 - Ujjawal Poonia