Question

我对Vue和Javascript大致陌生。我有两个按钮，在单击时应更改背景颜色。我添加了一些Javascript代码以使它们切换，但是问题是，当选择“免费”按钮时，背景会更改，但是当选择“付费”按钮时，背景不会更改。

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

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

下面是我想要做的Codepen。

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

非常感谢！

Answer 1

编辑：更改了功能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");
 }

Demo

Answer 2

您可以按照以下步骤操作：

<button class="buttonCloserGreen" onclick="changeType(0)" id="myDIV0">
Free
</button>

<button class="buttonCloserBlue" onclick="changeType(1)" id="myDIV1">
Paid
</button>

在jquery中：

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

Answer 3

我已经传递了complete元素，因此您不必使用ID / Class。

function changeType(element) {
  element.classList.toggle("active");
}

.buttonCloserGreen{
    height: 45px;
    min-width: 200px;
    margin-bottom: 10px;
    border: 2px solid #53DD6C;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 4px 4px 20px 0 rgba(35, 31, 32, .05);
    transition: opacity 200ms ease;
    transition: transform 200ms cubic-bezier(.175, .885, .32, 1.275), opacity 200ms ease;
    font-family: Poppins;
    color: #53DD6C;
    font-size: 14px;
    line-height: 40px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
}

.buttonCloserBlue{
    height: 45px;
    min-width: 200px;
    margin-bottom: 10px;
    border: 2px solid #0491F2;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 4px 4px 20px 0 rgba(35, 31, 32, .05);
    transition: opacity 200ms ease;
    transition: transform 200ms cubic-bezier(.175, .885, .32, 1.275), opacity 200ms ease;
    font-family: Poppins;
    color: #0491F2;
    font-size: 14px;
    line-height: 40px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
}

.active{
  background-color: black;
}

<button class="buttonCloserGreen" onclick="changeType(this)" id="myDIV">
Free
</button>

<button class="buttonCloserBlue" onclick="changeType(this)" id="myDIV">
Paid
</button>

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

3 个答案: