Javascript 在 Wordpress 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14049166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript Not Working in Wordpress
提问by RossPW
My site is built with Wordpress, and recently I've been adding some basic javascript to it: RossPW.com
我的网站是用 Wordpress 构建的，最近我一直在向它添加一些基本的 javascript：RossPW.com
However, all the javascript I've added doesn't seem to work, and I can't figure out why for the life of me!
但是，我添加的所有 javascript 似乎都不起作用，而且我一生都无法弄清楚为什么！
For example, I added the following simple snippet to the header, to fade in the -- but this doesn't work:
例如，我在标题中添加了以下简单片段，以淡入 -- 但这不起作用：
<script type="text/javascript">
$('body').hide();
$('body').fadeIn(3000);
</script>
To try and troubleshoot this so far, I have tried two things:
到目前为止，为了尝试解决这个问题，我尝试了两件事：
1) Properly added wp_enqueue to the header.php (this has been known to cause some problems with wordpress in the past:
1）在header.php中正确添加了wp_enqueue（过去已知这会导致wordpress出现一些问题：
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
2)I also tried included javascript as an external .js file here, with some basic JS to animate the header or scroll to the top -- this hasn't worked either.
2）我还尝试在此处将 javascript 作为外部 .js 文件包含在内，并使用一些基本的 JS 来为标题设置动画或滚动到顶部——这也不起作用。
Any help would be much appreciated -- thanks!
任何帮助将不胜感激 - 谢谢！
UPDATE:In order to ensure that js/jquery are loaded properly. I've tried this basic alert -- which does in fact work!
更新：为了确保正确加载 js/jquery。我已经尝试过这个基本警报——它确实有效！
<script type="text/javascript">
alert('ALERT!')
</script>
However, all the other javascript I've written does not -- and I can't figure out why. The javascript I've written seems to be fine, as seen here: jsfiddle.net/v9NSR/
但是，我编写的所有其他 javascript 都没有——我不知道为什么。我写的 javascript 似乎很好，如下所示：jsfiddle.net/v9NSR/
采纳答案by swapnesh
Two Things to fix -
需要解决的两件事-
- Error: SyntaxError: illegal character Source File: http://rosspw.com/wp-content/themes/rosspw2013/js/rosspw.jsLine: 21, Column: 5 Source Code: });? ;a?
- Try adding this JS code just before you are closing the body tag.
- 错误：SyntaxError：非法字符源文件：http://rosspw.com/wp-content/themes/rosspw2013/js/rosspw.js 行：21，列：5 源代码：});? ;一种？
- 尝试在关闭 body 标记之前添加此 JS 代码。
Let me know if it works for you or not.
让我知道它是否适合你。
Try to use Firebugfor debugging.
尝试Firebug用于调试。
For better Understanding Check this screenshot -
为了更好地理解检查这个截图 -
As you are using jquery before its been loaded.
当您在加载之前使用 jquery 时。
回答by Paul Kearney - pk
It looks like you are calling your jquery functions before the script tag that is loading jquery.js.
看起来您正在加载 jquery.js 的脚本标记之前调用您的 jquery 函数。
Line 70-71:
第 70-71 行：
$('body').hide();
$('body').fadeIn(3000);
This gives an exception: Uncaught ReferenceError: $ is not defined
这给出了一个例外：Uncaught ReferenceError: $ is not defined
But jquery.js isn't loaded until line 94:
但是 jquery.js 直到第 94 行才加载：
<script type='text/javascript' src='http://rosspw.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
You can do one of two things:
您可以执行以下两项操作之一：
- Move your jquery.js reference to the top of the page.
Call your jquery functions after the document has been loaded. Something like:
function fadeInBody() { $('body').hide(); $('body').fadeIn(3000); } window.onload = fadeInBody;
- 将您的 jquery.js 引用移动到页面顶部。
在加载文档后调用您的 jquery 函数。就像是：
函数fadeInBody() { $('body').hide(); $('body').fadeIn(3000); } window.onload =fadeInBody;
回答by martin schwartz
The first thing you had wrong in your code was using the $sign to call jQuery. When you are coding jQuery in WordPress, you have to make sure there is no conflict with the code libraries as WordPress may use other libraries and it might mess up.
您在代码中出错的第一件事是使用$符号来调用 jQuery。当您在 WordPress 中编写 jQuery 时，您必须确保与代码库没有冲突，因为 WordPress 可能会使用其他库并且可能会搞砸。
The proper way to use jQuery in WordPress is jQuery();instead of $();which in your case would be:
在WordPress使用jQuery的正确方法是jQuery();代替$();而你的情况是：
<script type="text/javascript">
$('body').hide();
$('body').fadeIn(3000);
</script>
Another way to do it would be to wrap the jQuery code with the jQuery $.noConflict()function, such as:
另一种方法是使用 jQuery$.noConflict()函数包装 jQuery 代码，例如：
jQuery.noConflict();
(function( $ ) {
$(function() {
// your code here
});
})(jQuery);
Check thisout for more information and full documentation about the noConflict function.
查看此内容以获取有关 noConflict 函数的更多信息和完整文档。
Hope it works for you!
希望这对你有用！
回答by Mark Dee
try adding jquery on the footer just before wp_footer()followed by your script
尝试在页脚上添加 jquery，然后再添加wp_footer()您的脚本
<?php
wp_enqueue_script('jquery');
wp_enqueue_script('myscript', 'myscript.js', array('jquery'));
wp_footer();
?>
then on you external script:
然后在你的外部脚本上：
$(document).ready(function () {
$('body').hide();
$('body').fadeIn(3000);
});
