如何在单击另一个按钮时将动态类添加到多个动态按钮？

Question

我正在开发一个 nuxt.js Web 应用程序，我有一个静态按钮和多个动态按钮，单击静态按钮时我想向每个动态按钮添加类。使用下面的代码，我可以向按钮添加类，但它仅适用于第一个按钮，其余按钮类将动态添加。<button  @click="scrollToDiv()" class="btn btn-block btn-primary py-2 text-center rounded" style="background: #1f7ae0; border: #1f7ae0;">下面是多个动态按钮<button id="enroll" class="btn btn-primary btn-block text-center rounded" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button><button id="enroll" class="btn btn-primary btn-block text-center rounded" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button><button id="enroll" class="btn btn-primary btn-block text-center rounded" style="background: #2685ef;border: 2px solid #2685ef;">Buy Now</button>下面是脚本scrollToDiv() {    document.getElementById('pricing').scrollIntoView({        behavior: 'smooth',    })    var enroll = document.getElementById('enroll')    enroll.classList.add('glow')    var scrollTimeout    clearTimeout(scrollTimeout)    scrollTimeout = setTimeout(function () {        enroll.classList.remove('glow')    }, 2000)}我想在单击静态按钮时向每个动态按钮添加动态 CSS.glow {    color: #fff;    background: linear-gradient(40deg, #2031ffa1, #05ff75cf) !important;    border-radius: 12px !important;    box-shadow: 5px 5px #ff922e !important;  }

Answer 1

我正在开发一个 nuxt.js Web 应用程序，我有一个静态按钮和多个动态按钮，单击静态按钮时我想向每个动态按钮添加类。

使用下面的代码，我可以向按钮添加类，但它仅适用于第一个按钮，其余按钮类将动态添加。

<button  @click="scrollToDiv()" class="btn btn-block btn-primary py-2 text-center rounded" style="background: #1f7ae0; border: #1f7ae0;">

下面是多个动态按钮

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

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

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

下面是脚本

scrollToDiv() {

    document.getElementById('pricing').scrollIntoView({

        behavior: 'smooth',

    })

    var enroll = document.getElementById('enroll')

    enroll.classList.add('glow')

    var scrollTimeout

    clearTimeout(scrollTimeout)

    scrollTimeout = setTimeout(function () {

        enroll.classList.remove('glow')

    }, 2000)

}

我想在单击静态按钮时向每个动态按钮添加动态 CSS

.glow {

    color: #fff;

    background: linear-gradient(40deg, #2031ffa1, #05ff75cf) !important;

    border-radius: 12px !important;

    box-shadow: 5px 5px #ff922e !important;

  }

Answer 2

元素的 id 应该是唯一的，因此当您使用时，getElementById您只会获得第一个匹配的元素。我会尝试为这三个按钮提供相同的类，并使用getElementsByClassName(className)，这将返回一个 HTMLCollection，允许您迭代元素。所以像这样：

scrollToDiv() {

  document.getElementById('pricing').scrollIntoView({

    behavior: 'smooth',

  })

  var elements = document.getElementsByClassName('example-classname')

  for(let e of elements) e.classList.add('glow')

  var scrollTimeout

  clearTimeout(scrollTimeout)

  scrollTimeout = setTimeout(function () {

    for(let e of elements) e.classList.remove('glow')

  }, 2000)

}