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选择器直接查询按钮。然后添加一个事件监听器，等待click事件。

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与您的JS中的colorChange（资本＆＃39; C＆＃39;）和e1与el不同（1 vs L）。< / p>

＆＃13;

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");
  }
}

＆＃13;

#select {
  width: 10em;
  height: 1.5em;
}

.classA {
  background: red;
}

.classB {
  background: green;
}

＆＃13;

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

＆＃13;

Answer 3

你的逻辑没问题。只是你必须纠正这些错别字：

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

请注意，您需要更加谨慎，因为JavaScript 区分大小写。

玩得开心！

创建一个在红色和绿色之间切换的按钮

3 个答案: