jquery - Wordpress 打破 jQuery 背景动画脚本

Question

当包含在 Wordpress 主题的标题中时，我在一个小的背景动画脚本上收到如下所示的错误 (73TypeError)，这会破坏脚本。当脚本包含在非 Wordpress 页面上时，我没有看到任何错误：

这是脚本：

$(function() {
   $(".bottom").hover( function () {
      $(this).animate( {
         backgroundPosition : '0px 35px'}
      , 300); }
   , function () {
      $(this).animate( {
         backgroundPosition : '0px 0px'}
      , 600); }
   ); 
   }
);

有人可以建议导致此错误的原因吗？

谢谢，

缺口

Answer 1

在 wordpress 中拳头，jQuery 应该加载无冲突。因此，在这种情况下，您的文件应该是；

var $j = jQuery.noConflict();

$j(function() {
   $j(".bottom").hover( function () {
      $j(this).animate( {
         backgroundPosition : '0px 35px'}
      , 300); }
   , function () {
      $j(this).animate( {
         backgroundPosition : '0px 0px'}
      , 600); }
   ); 
   }
);

其次，就像提到的未定义一样，您需要使用wp-enqueue-script();

为此，为了获得最佳实践，请将您的 jQuery 放在一个单独的文件中。例如调用它 bganimation.js

现在要在 wordpress 中加载该 js 文件，请使用 wp-enqueue-script(); 像这样。

function this_is_jquery_example(){
wp_enqueue_script( 'jquery' );;
wp_enqueue_script('myscript', plugin_dir_url(__FILE__) .' bganimation.js');

}
add_action('wp_enqueue_scripts','this_is_jquery_example');

希望这可以帮助。