Wordpress中Javascript不起作用

Question

Wordpress中Javascript不起作用

javascriptwordpressheaderwordpress-theming

3

我的网站是使用WordPress构建的，最近我添加了一些基本的JavaScript代码：RossPW.com 然而，我添加的所有JavaScript代码似乎都不能正常工作，我无法想出其中的原因！

例如，我在头部添加了以下简单的代码片段来淡入图像，但这并没有起作用：

<script type="text/javascript">
$('body').hide();
$('body').fadeIn(3000);
</script>

为了尝试解决这个问题，我尝试了两件事情：

1）在header.php中正确添加了wp_enqueue（过去已知这在wordpress中会引起一些问题）：

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

2) 我还尝试将JavaScript作为外部.js文件包含在此处，其中包含一些基本的JS来使标题动画或滚动到顶部 - 但这也没有起作用。

任何帮助都将不胜感激 - 谢谢！

更新： 为确保js/jquery已正确加载。我尝试了这个基本的警报 - 它确实有效！

<script type="text/javascript">
       alert('ALERT!')
</script>

然而，我编写的其他JavaScript代码并没有遇到这个问题，但是我无法弄清楚原因。我编写的JavaScript代码似乎很好，如此处所示：jsfiddle.net/v9NSR/

- RossPW

你确定你在 document.ready 中加载了吗？ - elclanrs

尝试将脚本添加到body的末尾或将调用包装在window.onLoad中（如果使用jQuery，则最好使用$(document).ready(）。 - John Dvorak

确保在执行您的代码时已加载jQuery。 - liunian

除了在 jQuery 加载之前运行代码外，您还在 <head> 部分运行代码，这意味着您在 <body> 元素呈现/可操作之前运行它。 - Ian

1

WordPress是罪魁祸首——这里有一个我发现的解决方案已经被证明有效：http://wp.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins/我必须使用疯狂的WordPress方法“enqueue”我的script.js文件，或者如果我将脚本放在DOM中，我必须加上前缀：

jQuery(document).ready(function($) {
  $('body').hide();
  $('body').fadeIn(1000);
});

- RossPW

4个回答

3

你的代码中第一个错误是使用$符号调用jQuery。在WordPress中编写jQuery时，必须确保与代码库没有冲突，因为WordPress可能使用其他库，这可能会导致混乱。

在WordPress中正确使用jQuery的方法是jQuery();而不是$();，在你的情况下应该是：

<script type="text/javascript">
$('body').hide();
$('body').fadeIn(3000);
</script>

另一种方法是将jQuery代码包装在jQuery $.noConflict()函数中，如下所示：

jQuery.noConflict();
   (function( $ ) {
       $(function() {
          // your code here
       });
   })(jQuery);

请查看此链接，了解更多关于noConflict函数的信息和完整文档。

希望这对您有用！

- martin schwartz

1

看起来你在加载jquery.js脚本标签之前调用了你的jquery函数。

第70-71行：

$('body').hide();
$('body').fadeIn(3000);

这会产生一个异常：未捕获的引用错误：$未定义

但是直到第94行才加载jquery.js：

<script type='text/javascript' src='http://rosspw.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

你可以选择以下两种方式之一：

将jquery.js的引用移到页面顶部。
在文档加载完成后调用你的jquery函数。例如：

function fadeInBody() { $('body').hide(); $('body').fadeIn(3000); } window.onload = fadeInBody;

- Paul Kearney - pk

我似乎无法使底部的代码正确格式化。 - Paul Kearney - pk

0

尝试在wp_footer()之前的页脚添加jQuery，然后再加上你的脚本

<?php
    wp_enqueue_script('jquery');
    wp_enqueue_script('myscript', 'myscript.js', array('jquery'));
    wp_footer();
?>

然后在你的外部脚本中：

$(document).ready(function () {
    $('body').hide();
    $('body').fadeIn(3000);
});

- Anthony

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- swapnesh · Accepted Answer

需要解决两个问题 -

错误：SyntaxError: illegal character源文件: http://rosspw.com/wp-content/themes/rosspw2013/js/rosspw.js行：21，列：5源代码： }); ;â€‹
尝试在关闭body标记之前添加此JS代码。

请告诉我它是否对您有用。

尝试使用 Firebug 进行调试。

为了更好地理解，请查看此截图 -

由于您在加载jquery之前使用了它，因此会出现此问题。

jQuery