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

我试图通过在我的Wordpress站点上选中和取消选中复选框来显示不同的div，其中包含不同的表（Wordpress快捷码）。 代码在JSFIDLE上运行良好，但在我的网站上，当我使用复选框时，它不会发生任何事情。我希望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

HTML

复选框



短代码2

短代码2

---

这里不需要Javascript。使用伪选择器

：选中的

和同级选择器

~

，使用纯CSS：

.overlay-1、.overlay-2{
显示：无；
}
#覆盖-1:未（：选中）~.overlay-1{
显示：块；
}
#覆盖层-1：选中。覆盖层-2{
显示：块；
}

复选框

短代码1

shortcode2

这里不需要Javascript。使用伪选择器

：选中的

和同级选择器

~

，使用纯CSS：

.overlay-1、.overlay-2{
显示：无；
}
#覆盖-1:未（：选中）~.overlay-1{
显示：块；
}
#覆盖层-1：选中。覆盖层-2{
显示：块；
}

复选框

短代码1

shortcode2

请在您的问题中发布一条，告诉我们问题是什么。另外，您是否检查了浏览器控制台的错误？我在控制台中找不到与此相关的任何错误。您还需要什么信息？如果代码在JSFIDLE中运行良好，那么仅此代码就可以了，并且它与WordPress之间一定存在冲突。我相信WordPress使用的是

jQuery

而不是

$

。您是否尝试过更改

$

？另外，如何在WordPress中加载jQuery？在functions.php中？插件？请在你的问题中发布一个，告诉我们问题是什么。另外，您是否检查了浏览器控制台的错误？我在控制台中找不到与此相关的任何错误。您还需要什么信息？如果代码在JSFIDLE中运行良好，那么仅此代码就可以了，并且它与WordPress之间一定存在冲突。我相信WordPress使用的是

jQuery

而不是

$

。您是否尝试过更改

$

？另外，如何在WordPress中加载jQuery？在functions.php中？插件？谢谢。嗯，有了这个，它不会显示任何已检查或未检查的div。也许我做错了什么。哦，忘了留言。。。现在一切正常。非常感谢。非常感谢。嗯，有了这个，它不会显示任何已检查或未检查的div。也许我做错了什么。哦，忘了留言。。。现在一切正常。非常感谢。

.hide1337 {
display: none;
}

.hide1338 {
display: show;
}

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