(Javascript/Wordpress)选中/未选中复选框时显示不同的内容

Question

我试图显示不同的div与不同的表( 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和兄弟姐妹选择器~。

​

.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>

​

注意:为此，复选框和要隐藏/显示的内容容器必须具有相同的父元素，内容容器必须在复选框之后。