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和兄弟选择器~：

＆＃13;

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

＆＃13;

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

＆＃13;

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

（Javascript / Wordpress）选中/取消选中复选框时显示不同的内容

1 个答案: