javascript - 如何使用按钮调用 Javascript

Question

使用CMS Wordpress，我有一个文件light.js，其目录是- wordpress ...themes/mytheme/js/light.js。这是light.js的脚本:

$(document).ready(function(){$("#lightsoff").click(function(){$("body").prepend('<div id="fader" style="position: absolute; 
z-index: 1000; left: 0px; top: 0px; background-color: rgba(0, 0, 0, 0.7); width: '+document.body.clientWidth+'px; height: '+document.body.clientHeight+'px; display: none;"></div>');$("#embed_holder").css("z-index","2000");$("#fader").fadeIn(500,function(){$("body")
.prepend('<div id="fader-message" style="position: absolute; z-index: 1100; top: 370px; left: 200px; 
color: #fff; font-size: 18px; font-family: Calibri;">Klik dimana saja pada layar untuk mematikan mode gelap.</div>');
$("#fader").bind("click",function(){$("#fader-message")
.fadeOut(1000,function(){$("#fader-message")
.remove();$("#fader").fadeOut(500,function(){$("#fader").remove();$("#embed_holder").css("z-index","0");});});});});});});

然后我在 function.php 中创建了一个函数，如下所示:

function lightsoff() {
      wp_enqueue_script('jquery');
      wp_enqueue_script('themesscript', get_template_directory_uri() . '/js/light.js', array('jquery'));    
}
add_action('wp_enqueue_scripts', 'lightsoff');

在我的 WordPress 帖子中，我尝试使用以下脚本调用函数 lightsoff:

<a href="javascript:void(0)" onclick="lightsoff()">Mode Gelap</a></div>

我检查了在我的网站源代码中打开发布页面时是否已读取 light.js 文件:

<script type='text/javascript' src='http://....../wp-content/plugins/wp-shortcode/js/jquery.tipsy.js?ver=4.7'></script>

但是当我单击Mode Gelap时，没有任何效果发生。哪一部分是错误的？请帮助我。

Answer 1

你已经在function.php中创建了lightsoff()函数，所以lightsoff是php函数而不是js函数，所以你不能像这样调用它

<a href="javascript:void(0)" onclick="lightsoff()">Mode Gelap</a></div>

现在的解决方案是在 JavaScript 中创建 Lightoff 函数。这是代码。

$(document).ready(function(){
    function lightsoff() {
          wp_enqueue_script('jquery');
          wp_enqueue_script('themesscript', get_template_directory_uri() . '/js/light.js', array('jquery'));    
    }
});

将 lightoff() 函数放入其中

$(document).ready(function(){  
});

正如我上面提到的。