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

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&nbsp; @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() {&nbsp; &nbsp; document.getElementById('pricing').scrollIntoView({&nbsp; &nbsp; &nbsp; &nbsp; behavior: 'smooth',&nbsp; &nbsp; })&nbsp; &nbsp; var enroll = document.getElementById('enroll')&nbsp; &nbsp; enroll.classList.add('glow')&nbsp; &nbsp; var scrollTimeout&nbsp; &nbsp; clearTimeout(scrollTimeout)&nbsp; &nbsp; scrollTimeout = setTimeout(function () {&nbsp; &nbsp; &nbsp; &nbsp; enroll.classList.remove('glow')&nbsp; &nbsp; }, 2000)}我想在单击静态按钮时向每个动态按钮添加动态 CSS.glow {&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; background: linear-gradient(40deg, #2031ffa1, #05ff75cf) !important;&nbsp; &nbsp; border-radius: 12px !important;&nbsp; &nbsp; box-shadow: 5px 5px #ff922e !important;&nbsp; }

Answer 2

元素的 id 应该是唯一的，因此当您使用时，getElementById您只会获得第一个匹配的元素。我会尝试为这三个按钮提供相同的类，并使用getElementsByClassName(className)，这将返回一个 HTMLCollection，允许您迭代元素。所以像这样：scrollToDiv() {&nbsp; document.getElementById('pricing').scrollIntoView({&nbsp; &nbsp; behavior: 'smooth',&nbsp; })&nbsp; var elements = document.getElementsByClassName('example-classname')&nbsp; for(let e of elements) e.classList.add('glow')&nbsp; var scrollTimeout&nbsp; clearTimeout(scrollTimeout)&nbsp; scrollTimeout = setTimeout(function () {&nbsp; &nbsp; for(let e of elements) e.classList.remove('glow')&nbsp; }, 2000)}