javascript - 创建一个按钮以将多个类添加到多个按钮并在单击重置时将其删除

Question

我有 10 个不同的按钮，每个按钮都有一个公共(public)类和一个唯一类。

<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. 重置:当有人点击那个重置按钮时，只会删除额外添加的类，其余相同。

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>