Nuxt.js：点击静态按钮为多个动态按钮添加动态类的问题解决

Hey there! Let's figure out why only the first dynamic button gets the glow class when you click your static button, and fix it properly.

The Root Problem #

In HTML, element IDs must be unique—you can't use the same id="enroll" for multiple buttons. When you call document.getElementById('enroll'), it only returns the first element with that ID, which is why your code only affects the first button.

Solution 1: Use Class Selectors (Native DOM Approach) #

If you prefer sticking with native DOM operations, replace the duplicate id with a shared class, then select all elements with that class.

Step 1: Update Dynamic Buttons

Change the id="enroll" to a class like enroll-btn:

<button class="enroll-btn btn btn-primary btn-block text-center rounded" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button>
<button class="enroll-btn btn btn-primary btn-block text-center rounded" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button>
<button class="enroll-btn btn btn-primary btn-block text-center rounded" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button>

Step 2: Modify the scrollToDiv Method

Use document.querySelectorAll('.enroll-btn') to get all buttons, then loop through them to add/remove the glow class:

scrollToDiv() {
  document.getElementById('pricing').scrollIntoView({ behavior: 'smooth' })
  const enrollButtons = document.querySelectorAll('.enroll-btn')
  let scrollTimeout

  clearTimeout(scrollTimeout)
  // Add glow class to all buttons
  enrollButtons.forEach(button => button.classList.add('glow'))
  
  // Remove glow class after 2 seconds
  scrollTimeout = setTimeout(() => {
    enrollButtons.forEach(button => button.classList.remove('glow'))
  }, 2000)
}

Solution 2: Vue/Nuxt Reactive Approach (Recommended) #

Since you're using Nuxt.js (a Vue framework), it's better to use Vue's reactive data instead of direct DOM manipulation. This aligns with Vue's data-driven philosophy.

Step 1: Add Reactive Data

In your component's script, add a boolean variable to track the glow state:

export default {
  data() {
    return {
      isButtonsGlowing: false
    }
  },
  methods: {
    scrollToDiv() {
      document.getElementById('pricing').scrollIntoView({ behavior: 'smooth' })
      let scrollTimeout

      clearTimeout(scrollTimeout)
      // Turn on glow
      this.isButtonsGlowing = true
      
      // Turn off glow after 2 seconds
      scrollTimeout = setTimeout(() => {
        this.isButtonsGlowing = false
      }, 2000)
    }
  }
}

Step 2: Bind Class to Reactive State

Update each dynamic button to use Vue's :class directive to conditionally apply the glow class:

<button 
  class="btn btn-primary btn-block text-center rounded" 
  style="background: #2685ef;border: 2px solid #2685ef;"
  :class="{ glow: isButtonsGlowing }"
>Buy Now</button>
<button 
  class="btn btn-primary btn-block text-center rounded" 
  style="background: #2685ef;border: 2px solid #2685ef;"
  :class="{ glow: isButtonsGlowing }"
>Buy Now</button>
<button 
  class="btn btn-primary btn-block text-center rounded" 
  style="background: #2685ef;border: 2px solid #2685ef;"
  :class="{ glow: isButtonsGlowing }"
>Buy Now</button>

Why This Works #

When isButtonsGlowing is set to true, Vue automatically adds the glow class to all buttons bound to this state. When it's set back to false, the class is removed—no manual DOM traversal needed!

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