在切换开关内添加开/关文本

时间：2018-08-01 18:44:17

标签： javascript html css

正如问题所暗示的，我只想在 js 中根据切换状态在切换开关内部内添加“开”或“关”文本。此主题中的示例很少，但无法掌握。 MWE如下所示：

window.addEventListener('DOMContentLoaded', function() {
  var swPos = [Math.random() >= 0.5];
  var swConnection = ["a0"];
  switchPosition(swPos, swConnection);

  var togglebtns = document.getElementsByClassName('togglebtn');
  for (var i = 0; i < togglebtns.length; i++) {
    togglebtns[i].addEventListener('click', function() {
      changingPin = Number(this.id.substr(2));
      swPos[changingPin] = !swPos[changingPin];

      drawSwitch(this.id.substr(2), swPos[changingPin]);
    });
  }
}, false);

function switchPosition(swPos, swConnection) {
  for (i = 0; i < swConnection.length; i++) {
    drawSwitch(pad(i, 2), swPos[i]);
  }
}

function drawSwitch(pinNoStr, state) {
  var btnWrapper = document.getElementById('tb' + pinNoStr);
  var btn = document.getElementById('mt' + pinNoStr);
  if (state == true) {
    btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px';
    btnWrapper.style.background = '#7bc77b';
    btnWrapper.style.border = '1px solid #7bc77b';

    document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\
        background: gradient-gradient(#ffffff, #77a1b9);\
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.1),  0 1px 0 rgba(255,255,255,0.1),  0 0 10px rgba(100,231,253,1),  inset 0 0 8px rgba( 61,157,247,0.8),  inset 0 -2px 5px rgba(185,231,253,0.3),  inset 0 -3px 8px rgba(185,231,253,0.5);'
  } else {
    btn.style.left = '0px';
    btnWrapper.style.background = 'lightgrey';
    btnWrapper.style.border = '1px solid lightgrey';

    document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\
        background: gradient-gradient(#36455b, #283446);\
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.2),  0 1px 0 rgba(255,255,255,0.1),  0 0 10px rgba(185,231,253,0),  inset 0 0 8px rgba(0,0,0,0.9),  inset 0 -2px 5px rgba(0,0,0,0.3),  inset 0 -5px 5px rgba(0,0,0,0.5);'
  }
}

function pad(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
* {
  margin: 0;
  padding: 0;
}

.dc {
  margin: 10px 50px 10px 50px;
  padding: 10px 10px 10px 10px;
  background: rgb(183, 154, 216);
}

.tbanimate {
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.togglebtn {
  width: 75px;
  height: 33px;
  float: left;
  background: lightgray;
  border-radius: 9999px;
  border: 2px solid lightgray;
}

.mainToggle {
  width: 33px;
  height: 33px;
  background: whitesmoke;
  border-radius: 9999px;
  position: relative;
  left: 0;
}

.light {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 10px;
  border-radius: 9999px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 2;
}
<section class="dc" id="00">
  <div>
    <div class="togglebtn tbanimate" id="tb00">
      <div class="mainToggle tbanimate" id="mt00"></div>
    </div>
    <div class="light" id="l00"></div>
  </div>
</section>

额外：是否可以进行可拖动的开关。当前，只有单击才能更改状态。如果我可以将圆从一侧拖到另一侧，那就太好了。纯JS，CSS。

2 个答案:

答案 0 :(得分：1)

您根据textContent内部的布尔值更改#mt00 div的{​​{1}}。

swPos
* {
  margin: 0;
  padding: 0;
}

.dc {
  margin: 10px 50px 10px 50px;
  padding: 10px 10px 10px 10px;
  background: rgb(183, 154, 216);
}

.tbanimate {
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.togglebtn {
  width: 75px;
  height: 33px;
  float: left;
  background: lightgray;
  border-radius: 9999px;
  border: 2px solid lightgray;
}

.mainToggle {
  width: 33px;
  height: 33px;
  background: whitesmoke;
  border-radius: 9999px;
  position: relative;
  left: 0;
}

.light {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 10px;
  border-radius: 9999px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 2;
}

#mt00{
  vertical-align: middle;
  display: table-cell;
}

答案 1 :(得分：0)

我设法处理了伪元素：after和：before 您需要将相对位置赋予父对象，并将绝对位置赋予：after和：before。

(()=>{
var swPos = [Math.random() >= 0.5];
  var swConnection = ["a0"];
   if(swPos[0]){
     document.getElementById("tb00").classList.add("on-text");
			document.getElementById("tb00").classList.remove("off-text");
   } else {
     document.getElementById("tb00").classList.add("off-text");
     document.getElementById("tb00").classList.remove("on-text");
   }
  switchPosition(swPos, swConnection);

  var togglebtns = document.getElementsByClassName('togglebtn');
  for (var i = 0; i < togglebtns.length; i++) {
    togglebtns[i].addEventListener('click', function() {
      changingPin = Number(this.id.substr(2));
      swPos[changingPin] = !swPos[changingPin];
      if(swPos[changingPin]){
      document.getElementById("tb00").classList.add("on-text");
			document.getElementById("tb00").classList.remove("off-text");
      
      } else {
         document.getElementById("tb00").classList.add("off-text");
         document.getElementById("tb00").classList.remove("on-text");
      }
      drawSwitch(this.id.substr(2), swPos[changingPin]);
    });
  }
})();

function switchPosition(swPos, swConnection) {
  for (i = 0; i < swConnection.length; i++) {
    drawSwitch(pad(i, 2), swPos[i]);
  }
}

function drawSwitch(pinNoStr, state) {
  var btnWrapper = document.getElementById('tb' + pinNoStr);
  var btn = document.getElementById('mt' + pinNoStr);
  if (state == true) {
    btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2) + 'px';
    btnWrapper.style.background = '#7bc77b';
    btnWrapper.style.border = '1px solid #7bc77b';

    document.getElementById('l' + pinNoStr).style.cssText = 'background: #b9f3fe;\
        background: gradient-gradient(#ffffff, #77a1b9);\
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.1),  0 1px 0 rgba(255,255,255,0.1),  0 0 10px rgba(100,231,253,1),  inset 0 0 8px rgba( 61,157,247,0.8),  inset 0 -2px 5px rgba(185,231,253,0.3),  inset 0 -3px 8px rgba(185,231,253,0.5);'
  } else {
    btn.style.left = '0px';
    btnWrapper.style.background = 'lightgrey';
    btnWrapper.style.border = '1px solid lightgrey';

    document.getElementById('l' + pinNoStr).style.cssText = 'background: #283446;\
        background: gradient-gradient(#36455b, #283446);\
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.2),  0 1px 0 rgba(255,255,255,0.1),  0 0 10px rgba(185,231,253,0),  inset 0 0 8px rgba(0,0,0,0.9),  inset 0 -2px 5px rgba(0,0,0,0.3),  inset 0 -5px 5px rgba(0,0,0,0.5);'
  }
}

function pad(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
* {
  margin: 0;
  padding: 0;
}

.dc {
  margin: 10px 50px 10px 50px;
  padding: 10px 10px 10px 10px;
  background: rgb(183, 154, 216);
}

.tbanimate {
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.togglebtn {
  width: 75px;
  height: 33px;
  float: left;
  background: lightgray;
  border-radius: 9999px;
  border: 2px solid lightgray;
  position: relative;
}

.on-text:before {
  content: 'On';
  position: absolute;
  top: 8px;
  left: 8px;
}

.off-text:after {
  content: 'Off';
  position: absolute;
  top: 8px;
  right: 8px;
}

.mainToggle {
  width: 33px;
  height: 33px;
  background: whitesmoke;
  border-radius: 9999px;
  position: relative;
  left: 0;
}

.light {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 10px;
  border-radius: 9999px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 2;
}
<section class="dc" id="00">
  <div>
    <div class="togglebtn tbanimate off-text" id="tb00">
      <div class="mainToggle tbanimate" id="mt00"></div>
    </div>
    <div class="light" id="l00"></div>
  </div>
</section>

相关问题
最新问题