如何在此切换按钮上触发第二点击事件？

Question

我想知道是否有人会知道触发第二次单击的好方法，所以当切换按钮切换颜色时，它会随之改变，因为现在您必须单击字母来切换颜色，并单击滑动条来切换颜色。切换？我尝试实现切换按钮的状态，以便当切换状态切换时，文本的颜色也会切换，但我不知道该怎么做。现在，颜色会通过更改叠加而改变，这些叠加基本上是相同的文本，彼此之间具有不同的颜色，但是会通过单击事件在当前叠加的基础上在这些叠加之间进行切换。

function f() {
  var txt = document.getElementById("overlay");

  if (txt.className == 'overlay') {
    txt.className = "overlay2";
  } else {
    txt.className = "overlay";
  }

  var txt2 = document.getElementById("overlay2");

  if (txt2.className == 'overlay2') {
    txt2.className = "overlay";
  } else {
    txt2.className = "overlay2";
  }

  var txt3 = document.getElementById("overlay3");

  if (txt3.className == 'overlay3') {
    txt3.className = "overlay4";
  } else {
    txt3.className = "overlay4";
  }

  var txt4 = document.getElementById("overlay4");

  if (txt4.className == 'overlay4') {
    txt4.className = "overlay3";
  } else {
    txt4.className = "overlay4";
  }
}

.overlay {
  margin-top: 12px;
  padding-left: 25px;
  font-family: "Maison Neue";
  font-size: 10px;
  line-height: 11px;
  color: #FFFFFF;
  height: 12px;
  width: 51px;
  font-weight: 500;
  letter-spacing: 0.6px;
  z-index: 1;
  position: absolute;
}

.overlay2 {
  padding-left: 25px;
  margin-top: 12px;
  font-family: "Maison Neue";
  font-size: 10px;
  line-height: 11px;
  color: #0098CF;
  height: 12px;
  width: 51px;
  font-weight: 500;
  letter-spacing: 0.6px;
  z-index: 1;
  position: absolute;
}

.overlay3 {
  margin-top: 12px;
  padding-left: 108px;
  font-family: "Maison Neue";
  font-size: 10px;
  line-height: 11px;
  height: 11px;
  width: 72px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: #0098CF;
  z-index: 1;
  position: absolute;
}

.overlay4 {
  margin-top: 12px;
  padding-left: 108px;
  font-family: "Maison Neue";
  font-size: 10px;
  line-height: 11px;
  height: 11px;
  width: 72px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: #FFFFFF;
  z-index: 1;
  position: absolute;
}

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

.cmn-toggle+label {
  display: block;
  position: absolute;
  cursor: pointer;
  outline: none;
  user-select: none;
}

input.cmn-toggle-round+label:before,
input.cmn-toggle-round+label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}

input.cmn-toggle-round+label:before {
  height: 31px;
  width: 193px;
  background-color: #0098CF;
  border-radius: 16.5px;
  z-index: -2;
  position: relative;
  transition: margin 0.4s;
}

input.cmn-toggle-round+label:after {
  margin-top: -32px;
  margin-left: 2px;
  background-color: #FFFFFF;
  height: 27px;
  width: 96px;
  border-radius: 15px;
  top: 3px !important;
  border: 1px solid #0098CF;
  transition: margin 0.4s;
  z-index: -1;
  position: relative;
}

input.cmn-toggle-round:checked+label:after {
  margin-left: 94px;
}

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center">
  <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
  <label for="cmn-toggle-1"></label>
</div>

<p> <span id="txt" class='overlay'></span></p>
<p> <span id="txt2" class='overlay2'></span></p>
<p> <span id="txt3" class='overlay3'></span></p>
<p> <span id="txt4" class='overlay4'></span></p>
<p id="overlay" onclick='f();' class="overlay"> BITS/SEC</p>
<p id="overlay2" onclick='f();' class="overlay2"> BITS/SEC</p>
<p id="overlay3" onclick='f();' class="overlay3"> PACKETS/SEC</p>
<p id="overlay4" onclick='f();' class="overlay4"> PACKETS/SEC</p>
<p id="click" onclick='f();'></p>