我正在开发一个 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;
}
慕森王
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)
}
添加回答
举报
0/150
提交
取消