如何在HTML CSS切換開關上使JavaScript'getElementById'工作

Question

我需要使用JavaScript激活HTML / CSS“切換開關”。

我希望帶有文本的DIV默認情況下是隱藏的，並且當滑塊（切換器）向左滑動時，它會使用JavaScript“觸發”要顯示的DIV。

我的處境是正確的，但是我的動作有些不對勁...

 function toggleDiv() { var triggeredDiv = document.querySelector('.triggeredDiv'); if (document.getElementById('flipswitch').checked) { triggeredDiv.classList.remove('shown'); } else { triggeredDiv.classList.add('shown'); } } document.getElementById('flipswitch').addEventListener("change", toggleDiv); 

 .flipswitch { position: relative; width: 200px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .flipswitch input[type=checkbox] { display: none; } .flipswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 50px; } .flipswitch-inner { width: 200%; margin-left: -100%; -webkit-transition: margin 0.3s ease-in 0s; -moz-transition: margin 0.3s ease-in 0s; -ms-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .flipswitch-inner:before, .flipswitch-inner:after { float: left; width: 50%; height: 60px; padding: 0; line-height: 60px; font-size: 18px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .flipswitch-inner:before { content: "MONTHLY"; padding-left: 12px; background-color: #FFFFFF; color: #888888; font-family: 'Montserrat', sans-serif; font-weight: 400; } .flipswitch-inner:after { content: "BY COUNTRY"; padding-right: 12px; background-color: #EBEBEB; color: #888888; text-align: right; font-family: 'Montserrat', sans-serif; font-weight: 400; } .flipswitch-switch { width: 45px; margin: 7.5px; background: #FFFFFF; border: 2px solid #999999; border-radius: 50px; position: absolute; top: 0; bottom: 0; right: 139px; -webkit-transition: all 0.3s ease-in 0s; -moz-transition: all 0.3s ease-in 0s; -ms-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } .flipswitch-cb:checked+.flipswitch-label .flipswitch-inner { margin-left: 0; } .flipswitch-cb:checked+.flipswitch-label .flipswitch-switch { right: 0; } .triggeredDiv { display: none; } .triggeredDiv.shown { display: block; } 

 <div class="flipswitch"> <input type="checkbox" name="flipswitch" class="flipswitch-cb" id="fs" checked> <label class="flipswitch-label" for="fs"> <div class="flipswitch-inner"></div> <div class="flipswitch-switch"></div> </label> </div> <div class="triggeredDiv"> Show Text </div> 

Answer 1

這里的問題是，當您給交換機賦予fs的ID時，您正試圖通過flipswitch的ID來引用該flipswitch。 javascript中的引用只需更改為：

document.getElementById('fs')

代替

document.getElementById('flipswitch')

Answer 2

我認為，如果僅在函數document.getElementById('flipswitch')的兩個實例更改為document.getElementById('fs') ，則代碼可以正常工作。

JSFiddle示例： https ：//jsfiddle.net/oq8wL2v4/

Answer 3

而不是使用document.getElementById您應該使用某種方法來按class獲取元素，因為這是您的標記中定義的。

另外，您的輸入復選框不會被切換為checked ，而只是切換被triggered div的狀態。

我們可以通過調整代碼來完成這項工作：

function toggleDiv() {
   this.element || ( this.element = document.querySelector('.triggeredDiv') );

   this.element.classList.toggle("shown");
  }

---

帶有注釋以便更好地理解：

function toggleDiv() {
  /*
   if we don't have a reference in `toggleDiv.element` 
   we use `document.querySelector` to retrieve
   and save the reference to the element `.triggeredDiv`
   this ensures that we only go through the DOM once to retrieve the element
   no matter how many times the function is called
   which is more performant. 
  */
  this.element || (this.element = document.querySelector('.triggeredDiv'));

  /*
   after we have the element, we simply toggle the `shown` class
   using the `classList.toggle` method.
  */
   this.element.classList.toggle("shown");
}

  document.querySelector('.flipswitch').addEventListener("change", toggleDiv);

 function toggleDiv() { this.element || ( this.element = document.querySelector('.triggeredDiv') ); this.element.classList.toggle("shown"); } document.querySelector('.flipswitch').addEventListener("change", toggleDiv); 

 .flipswitch { position: relative; width: 200px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .flipswitch input[type=checkbox] { display: none; } .flipswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 50px; } .flipswitch-inner { width: 200%; margin-left: -100%; -webkit-transition: margin 0.3s ease-in 0s; -moz-transition: margin 0.3s ease-in 0s; -ms-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .flipswitch-inner:before, .flipswitch-inner:after { float: left; width: 50%; height: 60px; padding: 0; line-height: 60px; font-size: 18px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .flipswitch-inner:before { content: "MONTHLY"; padding-left: 12px; background-color: #FFFFFF; color: #888888; font-family: 'Montserrat', sans-serif; font-weight: 400; } .flipswitch-inner:after { content: "BY COUNTRY"; padding-right: 12px; background-color: #EBEBEB; color: #888888; text-align: right; font-family: 'Montserrat', sans-serif; font-weight: 400; } .flipswitch-switch { width: 45px; margin: 7.5px; background: #FFFFFF; border: 2px solid #999999; border-radius: 50px; position: absolute; top: 0; bottom: 0; right: 139px; -webkit-transition: all 0.3s ease-in 0s; -moz-transition: all 0.3s ease-in 0s; -ms-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } .flipswitch-cb:checked+.flipswitch-label .flipswitch-inner { margin-left: 0; } .flipswitch-cb:checked+.flipswitch-label .flipswitch-switch { right: 0; } .triggeredDiv { display: none; } .triggeredDiv.shown { display: block; } 

 <div class="flipswitch"> <input type="checkbox" name="flipswitch" class="flipswitch-cb" id="fs" checked> <label class="flipswitch-label" for="fs"> <div class="flipswitch-inner"></div> <div class="flipswitch-switch"></div> </label> </div> <div class="triggeredDiv"> Show Text </div>