更改文本颜色onclick

Question

我有一个切换按钮，当我单击按钮时，我希望能够在未选中时将文本的颜色从较浅的颜色更改为选中时的黑色。现在它只在其中一个按钮上工作。附件是我的代码的小提琴。 https://jsfiddle.net/h2db7qLp/

function onContainerClick(event) {
  if (event.classList.contains('off')) {
    event.classList.remove('off');
  } else {
    event.classList.add('off');
  }
}

.container {
  background: #EFEFEF;
  position: relative;
  width: 126px;
  height: 40px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-top: #CCC solid 1px;
  border-radius: 2px 0 0 2px;
  border-bottom: #EEE solid 1px;
  border-right: #ddd solid 1px;
  border-left: #ddd solid 1px;
  border-radius: 2px 0 0 2px;
  border-style: solid;
  border-width: 1px;
}
.container2 {
  background: #EFEFEF;
  position: relative;
  width: 226px;
  height: 40px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-top: #CCC solid 1px;
  border-radius: 2px 0 0 2px;
  border-bottom: #EEE solid 1px;
  border-right: #ddd solid 1px;
  border-left: #ddd solid 1px;
  border-radius: 2px 0 0 2px;
  border-style: solid;
  border-width: 1px;
}
.switch {
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: #fff;
  transition: all 0.15s ease;
  left: 0;
  z-index: 1;
}
.switch-title {
  margin-bottom: 6px;
  font-size: 16px;
}
.container.off {} .container.off .switch,
.container2.off .switch {
  left: 50%;
  background-color: #fff;
}
.container2.off .left-long,
.container.off .left-short,
.container2.on .right-long,
.container.on .right-short {
  color: #aaa;
}
.label {
  position: absolute;
  width: 50%;
  height: 100%;
  text-align: center;
  padding-top: 11px;
  z-index: 1;
  font: 16px"adiHaus", Arial, sans-serif;
  font-weight: bolder;
  color: #000;
}
.label.right-long {
  left: 50%;
}
.label.right-short {
  left: 50%;
}

<div class="switch-title">Hand:</div>
<div class="container" id="container" onclick="onContainerClick(this)">
  <div class="switch" id="switch">
  </div>
  <div class="label left-short" onclick="onContainerClick(this)">L</div>
  <div class="label right-short" onclick="onContainerClick(this)">R</div>
</div>

Answer 1

我认为通过在更改上添加“on”类它很顺利，你也不需要在每个div上调用你的处理程序，只需调用一次。

function onContainerClick(event) {
  if (event.classList.contains('off')) {
    event.classList.remove('off');
    event.classList.add('on');
  } else {
    event.classList.add('off');
    event.classList.remove('on');
  }
}

  .container {
  background: #EFEFEF;
  position: relative;
  width: 126px;
  height: 40px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-top: #CCC solid 1px;
  border-radius: 2px 0 0 2px;
  border-bottom: #EEE solid 1px;
  border-right: #ddd solid 1px;
  border-left: #ddd solid 1px;
  border-radius: 2px 0 0 2px;
  border-style: solid;
  border-width: 1px;
}    

.container2 {
  background: #EFEFEF;
  position: relative;
  width: 226px;
  height: 40px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-top: #CCC solid 1px;
  border-radius: 2px 0 0 2px;
  border-bottom: #EEE solid 1px;
  border-right: #ddd solid 1px;
  border-left: #ddd solid 1px;
  border-radius: 2px 0 0 2px;
  border-style: solid;
  border-width: 1px;
}    

.switch {
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: #fff;
  transition: all 0.15s ease;
  left: 0;
  z-index: 1;
}    

.switch-title {
  margin-bottom: 6px;
  font-size: 16px;
}    

.container.off {}    

.container.off .switch,
.container2.off .switch {
  left: 50%;
  background-color: #fff;
}    

.container2.off .left-long,
.container.off .left-short,
.container2.on .right-long,
.container.on .right-short {
  color: #aaa;
}    

.label {
  position: absolute;
  width: 50%;
  height: 100%;
  text-align: center;
  padding-top: 11px;
  z-index: 1;
  font: 16px "adiHaus", Arial, sans-serif;
  font-weight: bolder;
  color: #000;
}    

.label.right-long {
  left: 50%;
}    

.label.right-short {
  left: 50%;
}

<div class="switch-title">Hand:</div>
<div class="container on" id="container" onclick="onContainerClick(this)">
  <div class="switch" id="switch">
  </div>
  <div class="label left-short">L</div>
  <div class="label right-short">R</div>
</div>