创建一个在红色和绿色之间变化的按钮

Question

我想创建一个简单的按钮，当我单击它们时，它会在红色和绿色之间变化，以表明某事已完成。有谁知道让按钮在颜色之间来回切换的简单方法？页面的设置还不是我想要的，但是需要先配置按钮，然后我才能按照我的意愿格式化页面的其余部分。我省略了处理正文和标题等其他内容的 CSS。 以下是我在网上看了一段时间后得到的：

function colorChange(id) {
  var e1 = document.getElementById(id);
  var currentClass = el.getAttribute("class");
  if(currentClass == 'classA') {
    el.setAttribute("class", "classB");
  }
  else {
    el.setAttribute("class", "classA");
  }
}

#select {
    width: 10em;
    height: 1.5em;
}

.classA {
    background: red;
}

.classB {
    background: green;
}

<input type="button" id="select" onclick="colorchange('select')" class="classA" />

Answer 1

这里是原生 JavaScript 版本。您首先使用getElementById 选择器直接查询按钮。然后添加一个事件监听器，等待点击事件。

classList，虽然返回一个数组，但不能在上面使用indexOf。但是，您可以使用contains。还需要注意的是，classList 在 Internet Explorer 9 或更早版本中不可用

var button = document.getElementById('my-button');

button.addEventListener('click', function() {
    if (button.classList.contains('red')) {   
      button.classList.remove('red');
      button.classList.add('green');
      button.innerHTML = 'Done';
    }
    else {
      button.classList.remove('green');
      button.classList.add('red');
      button.innerHTML = 'Not Done';
    }
});

.green { background: green; }
.red { background: red; }

<button id='my-button' class='green'>Change Color</button>

这最好通过 jQuery 实现，它是 toggleClass 函数。

$('#my-button').on('click', function() {
  $(this).text($(this).hasClass('red') ? 'Done': 'Not Done');
  $(this).toggleClass('red');
  $(this).toggleClass('green');
});

.red { background: red; }
.green { background: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='my-button' class='red'>Change Color</button>

正如您在上面看到的，在 jQuery 中要容易得多。

Answer 2

你只需要更加小心你的语法。 colorchange 在您的输入与 colorChange 在您的 JS（大写“C”）和 e1 与 el 不同（1 vs L）。

function colorChange(id) {
  var el = document.getElementById(id);
  var currentClass = el.getAttribute("class");
  if(currentClass == 'classA') {
    el.setAttribute("class", "classB");
  }
  else {
    el.setAttribute("class", "classA");
  }
}

#select {
  width: 10em;
  height: 1.5em;
}

.classA {
  background: red;
}

.classB {
  background: green;
}

<input type="button" id="select" onclick="colorChange('select')" class="classA" />

Answer 3

你的逻辑没问题。只需要纠正这些错别字即可：

1. 将 e1 更改为 el（用 L 代替 1）
2. 将onclick="colorchange('select')" 更改为onclick="colorChange('select')"

请记住，您需要更加小心，因为 JavaScript 区分大小写。

玩得开心！