如何实现Show All批量添加按钮额外类及Reset移除该类的功能？

Hey there! Let's tackle adding those two new buttons and get their functionality working smoothly with your existing code. Here's a straightforward, step-by-step solution:

1. Existing Button Structure (Recap) #

First, here's your original set of topic buttons, formatted as code for clarity:

<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>

2. Optimize Your Existing Toggle Function #

Your current loop runs up to i <= 12, but you only have buttons numbered 1-10. Let's tweak that to avoid unnecessary iterations:

// Optimized single-button toggle function
for (let i = 1; i <= 10; i++) {
  $(`.btn${i}`).click(function() {
    $(this).toggleClass(`act-btn${i}`);
  });
}

3. Add "Show All" and "Reset" Buttons #

First, add the two new control buttons to your HTML:

<!-- New control buttons -->
<button type="button" id="showAllBtn">Show All</button>
<button type="button" id="resetBtn">Reset</button>

Then add the JavaScript logic to make them work:

// "Show All" functionality: Add the corresponding act-btn class to each button in order
$('#showAllBtn').click(function() {
  for (let i = 1; i <= 10; i++) {
    $(`.btn${i}`).addClass(`act-btn${i}`);
  }
});

// "Reset" functionality: Remove all added act-btn classes, keeping original classes intact
$('#resetBtn').click(function() {
  for (let i = 1; i <= 10; i++) {
    $(`.btn${i}`).removeClass(`act-btn${i}`);
  }
});

4. Full Working Code Example #

Here's all the code put together for easy implementation (don't forget to include jQuery if you haven't already):

<!-- Topic Buttons -->
<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>

<!-- Control Buttons -->
<button type="button" id="showAllBtn">Show All</button>
<button type="button" id="resetBtn">Reset</button>

<!-- jQuery Dependency -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Single Button Toggle
for (let i = 1; i <= 10; i++) {
  $(`.btn${i}`).click(function() {
    $(this).toggleClass(`act-btn${i}`);
  });
}

// Show All Action
$('#showAllBtn').click(function() {
  for (let i = 1; i <= 10; i++) {
    $(`.btn${i}`).addClass(`act-btn${i}`);
  }
});

// Reset Action
$('#resetBtn').click(function() {
  for (let i = 1; i <= 10; i++) {
    $(`.btn${i}`).removeClass(`act-btn${i}`);
  }
});
</script>

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