亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在單擊另一個按鈕時將動態類添加到多個動態按鈕?

如何在單擊另一個按鈕時將動態類添加到多個動態按鈕?

回首憶惘然 2023-11-02 17:10:48
我正在開發一個 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;  }
查看完整描述

2 回答

?
溫溫醬

TA貢獻1752條經驗 獲得超4個贊

我正在開發一個 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;

  }


查看完整回答
反對 回復 2023-11-02
?
慕森王

TA貢獻1777條經驗 獲得超3個贊

元素的 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)

}


查看完整回答
反對 回復 2023-11-02
  • 2 回答
  • 0 關注
  • 169 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號