时间戳

首页 > 解决方案 > Javascript：切换按钮无法正常工作

javascript - Javascript：切换按钮无法正常工作

问题描述

我对 Vue 和 Javascript 大致是新手。我有两个按钮，单击时应更改背景颜色。I have added some Javascript code to make them toggle but the issue is that when the Free button is selected the background changes, but when the Paid button is selected it won't change.

如果有人可以提供帮助，将不胜感激。

function changeType(type) {
  var element = document.getElementById("myDIV");
  element.classList.toggle("active");
}

下面是我正在尝试做的 Codepen。

https://codepen.io/Aadil_Hafesji/pen/bxZWLg

非常感谢！！！

标签： javascriptbuttonvue.js

解决方案

编辑：更改函数 changeType 以在两个按钮之间切换。还向按钮添加了类按钮。

您应该将事件参数传递给 event.target 的函数和切换类。

<button class="buttonCloserGreen button" onclick="changeType(event)">
   Free
</button>

<button class="buttonCloserBlue button" onclick="changeType(event)">
   Paid
</button>

然后访问 changeType 中的目标元素：

 function changeType(e) {
    let btns = document.getElementsByClassName('button')
    for(let i = 0; i < btns.length; i++) {
         btns[i].classList.remove("active")
    }
    e.target.classList.toggle("active");
 }

演示

推荐阅读