通用JavaScript显示隐藏切换按钮需求：替换多文件实现

Got it, let's eliminate that repetitive JavaScript file mess once and for all. The key here is leveraging HTML data-* attributes to create a single, reusable script that works for any number of exercises—no more 40 separate files!

Step 1: Refine Your HTML Structure #

First, let's make sure your answer container has a clear link to its button. We'll use data-* attributes to pair each button with its corresponding answers. Here's how to adjust your table cell code:

<td class="FrenchAnswerAlign">
  <h6><button class="RevealToggle" data-target="1Ex1">Reveal Answer</button></h6>
  <!-- Add a data-answer attribute matching the button's data-target -->
  <div class="answer-container" data-answer="1Ex1" style="display: none;">
    <ul>
      <li><p>le passeport</p></li>
      <li><p>l'hôtel</p></li>
      <li><p>la valise</p></li>
      <!-- ... rest of your answers ... -->
    </ul>
  </div>
</td>

• The button's data-target holds a unique identifier for the exercise (like 1Ex1).
• The answer container gets a matching data-answer attribute, and we start it hidden with display: none.

Step 2: Write the Universal JavaScript #

This single script will handle all your toggle buttons, no matter how many you add. Place this in a single .js file (or a <script> tag at the end of your HTML):

window.addEventListener('DOMContentLoaded', function() {
  // Grab all toggle buttons
  const toggleButtons = document.querySelectorAll('.RevealToggle');
  
  toggleButtons.forEach(button => {
    button.addEventListener('click', function() {
      // Get the target ID from the button's data attribute
      const targetId = this.dataset.target;
      // Find the matching answer container
      const answerContainer = document.querySelector(`[data-answer="${targetId}"]`);
      
      // Toggle the display state
      if (answerContainer.style.display === 'none' || answerContainer.style.display === '') {
        answerContainer.style.display = 'block';
        this.textContent = 'Hide Answer'; // Optional: Update button text for clarity
      } else {
        answerContainer.style.display = 'none';
        this.textContent = 'Reveal Answer'; // Optional: Reset button text
      }
    });
  });
});

Why This Works Better #

• No Repetition: Add as many exercises as you want—just copy the table cell structure, update the data-target and data-answer values, and you're done. No new JS files needed.
• Flexible: If you later want to change how answers are displayed (like adding fade effects), you can swap out the style.display logic with CSS classes.
• Maintainable: All your toggle logic lives in one place, making it easy to update or fix later.

Bonus: Use CSS Classes for Cleaner Control #

For even more flexibility, use a CSS class to handle visibility instead of inline styles—this keeps style logic where it belongs:

.answer-container.hidden {
  display: none;
}

Then adjust the JavaScript to toggle the class:

window.addEventListener('DOMContentLoaded', function() {
  const toggleButtons = document.querySelectorAll('.RevealToggle');
  
  toggleButtons.forEach(button => {
    button.addEventListener('click', function() {
      const targetId = this.dataset.target;
      const answerContainer = document.querySelector(`[data-answer="${targetId}"]`);
      
      // Toggle the hidden class
      answerContainer.classList.toggle('hidden');
      // Update button text based on state
      this.textContent = answerContainer.classList.contains('hidden') ? 'Reveal Answer' : 'Hide Answer';
    });
  });
});

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