（Javascript / Wordpress）選中/取消選中復選框時顯示不同的內容

Question

我試圖通過檢查和取消選中我的Wordpress網站上的復選框來顯示不同的表格（Wordpress短代碼）。 代碼在jsfiddle上運行正常，但在我的網站上，當我使用復選框時，它不會發生任何事情。 我希望div包含不同的短代碼。 也許它與此有關？

使用Javascript：

$(document).ready(function() {

$("#overlay-1").change(function() {
$(".overlay-1").toggleClass("hide1337", this.unchecked)
$(".overlay-2").toggleClass("hide1338", this.unchecked)
}).change();

$("#overlay-1").change(function() {
$(".overlay-2").toggleClass("hide1337", this.unchecked)
$(".overlay-1").toggleClass("hide1338", this.unchecked)
}).change();


});

CSS

.hide1337 {
display: none;
}

.hide1338 {
display: show;
}

HTML

<div id="nav">
 <input type="checkbox" name="overlay-1" id="overlay-1">  Checkbox  
 <br/>
 </div>
<div class="overlay-1">
<br>shortcode2</div>
<div class="overlay-2">
<br>shortcode2</div>

http://jsfiddle.net/p6hFD/16/

Answer 1

這里不需要Javascript。 使用純粹的CSS來使用偽選擇器:checked和sibling selector ~ ：

 .overlay-1, .overlay-2 { display: none; } #overlay-1:not(:checked) ~ .overlay-1 { display: block; } #overlay-1:checked ~ .overlay-2 { display: block; } 

 <input type="checkbox" name="overlay-1" id="overlay-1"> Checkbox <div class="overlay-1"> <br>shortcode1</div> <div class="overlay-2"> <br>shortcode2</div> 

注意：為此，復選框和要隱藏/顯示的內容容器必須具有相同的父元素，並且內容容器必須位於復選框之后。