总之,我有一个流媒体网站,我想用jQuery做一个切换按钮来切换到黑暗/光明模式。请查看我的代码,我的代码有什么问题,bcz这对我不适用。
在页脚中。php(在正文上方)
<div class="gelap-terang"></div>
<script>
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".gelap-terang").hide();
jQuery("#gelap-terang").click(function(){
jQuery(".gelap-terang").toggle();
});
});
</script>
在播放器中。php
...
<div class="player_nav">
<button id="gelap-terang">Change Mode</button>
</div>
...
CSS代码
.gelap-terang {
height:100%;
width:100%;
background-color:black;
opacity:.8;
position:fixed;
top:0;left:0;
z-index:1;display:none;}
#player2, .player_nav {
z-index:99;
position:relative;}
该按钮在播放器视频下方看起来非常完美,但
<div class="gelap-terang"> 单击按钮时不会显示。我试图删除“显示:无在中。gelap terang CSS代码
<div class="gelap-terang"> 显示并看起来不错,但单击按钮时不会切换(隐藏)。
最合适的回答,由SO网友:Manjot 整理而成
由于jQuery出现错误。无冲突()
您不需要添加jQuery。无冲突();在wordpress文件中,因为默认情况下wordpress支持jQuery,但如果要使用$,则可以使用这种方式,而无需使用wp\\u enqueue\\u脚本(“jQuery”)
如果脚本加载到页脚中(大多数情况下都应该这样做),可以将代码包装在匿名函数(技术上是任何IIFE)中,在其中传递jQuery以映射到$。
(function($) {
// $ Works! You can test it with next line if you like
// console.log($);
})( jQuery );
如果您确实需要在标题中加载脚本,那么您可能无论如何都需要使用一个文档就绪函数,这样您就可以在那里传入$。
jQuery(document).ready(function( $ ) {
// $ Works! You can test it with next line if you like
// console.log($);
});