如何使用按鈕調用Javascript

使用CMS Wordpress，我有一個文件light.js，它的目錄是wordpress ... themes/mytheme/js/light.js。這是light.js的腳本：如何使用按鈕調用Javascript

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

，但是當我點擊模式Gelap，沒有發生影響。哪部分是錯誤的？請幫幫我。

來源

2017-01-03 Andi. S

你不能從JS調用PHP函數。嘗試將id =「lightsoff」添加到您的錨標記中。 – cbronson

@cbronson沒有ajax，就是。 –

同時檢查瀏覽器控制檯是否有錯誤。通常'''在wordpress中是未定義的，因爲使用'noConflict（）'，你需要將你的代碼包裝在一個IIFE中以隔離'$' – charlietfl

像這樣的東西？

jQuery(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() { 
 
     $("#fader").prepend('<div id="fader-message" style="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"); 
 
      }); 
 
     }); 
 
     }); 
 
    }); 
 
    }); 
 

 
}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="lightsoff">Click me</button>

來源

2017-01-03 06:36:06

您已經創建lightsoff（）在function.php功能，從而lightsoff是php溫控功能不js函數，所以你不能這樣調用

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

現在解決方案是在JavaScript中創建你的lightsoff函數。這是代碼。

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

把你lightsoff（）函數內部

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

正如我上面提到。

來源

2017-01-03 07:51:09

如何使用按鈕調用Javascript

回答

相關問題