Question

我必须制作一个用于为邮件加注星标的按钮。最初，按钮的颜色为白色，当我单击按钮时，它应将颜色更改为金色，再次单击同一按钮（取消星标消息）时，该颜色应再次将颜色更改为初始背景色，即白色

HTML： <button class="btn-hold" data-text-swap=" Starred!">Star Message!</button>

JavaScript（用于切换按钮上的消息）：

button.addEventListener('click', function() {
  if (button.getAttribute("data-text-swap") == button.innerHTML) {
    button.innerHTML = button.getAttribute("data-text-original");
  } else {
    button.setAttribute("data-text-original", button.innerHTML);
    button.innerHTML = button.getAttribute("data-text-swap");
  }
}, false);

CSS：

.btn-hold{

    float: right;
    text-decoration-color: white;
    background-color: ; 
    font-family: Lato;
    font-size: 20px;
    cursor: pointer;    
}
button{
    float: right;
}
button:focus{
    background:#FFD700;
}

Answer 1

您可以使用classList属性的本机toggle方法。您的JavaScript中也缺少对单击的button的引用。

var button = document.querySelector('.btn-hold');

button.addEventListener('click', function() {
  this.classList.toggle('btn-alt-color');

  if (button.getAttribute("data-text-swap") == button.innerHTML) {
    button.innerHTML = button.getAttribute("data-text-original");
  } else {
    button.setAttribute("data-text-original", button.innerHTML);
    button.innerHTML = button.getAttribute("data-text-swap");
  }
}, false);

.btn-hold {
  float: right;
  text-decoration-color: white;
  background-color: ;
  font-family: Lato;
  font-size: 20px;
  cursor: pointer;
}

button {
  float: right;
}

button:focus {
  background: #FFD700;
}

.btn-hold.btn-alt-color {
  background-color: lightgreen;
}

<button class="btn-hold" data-text-swap=" Starred!">Star Message!</button>

jsFiddle

Answer 2

请注意，element.classList.toggle返回一个布尔值，无需使事情复杂：

var
  button           = document.querySelector('.btn-hold'),
  defaultButtonTxt = button.textContent;


button.onclick = function() {
  this.textContent = (this.classList.toggle('btn-alt-color')) ? this.dataset.textSwap : defaultButtonTxt;
}

button {
  float: right;
}
.btn-hold {
  float: right;
  text-decoration-color: white;
  background: #FFD700;
  font-family: Lato;
  font-size: 20px;
  cursor: pointer;
}

.btn-alt-color {
  background-color: lightgreen;
}

<button class="btn-hold" data-text-swap=" Starred!">Star Message!</button>

如何在单击按钮时切换按钮颜色，以及在再次单击按钮时将颜色更改回其先前的颜色

2 个答案: