入队的JavaScript不起作用

时间:2018-05-09 作者:Stef

在创建自己的WordPress主题时,我遇到了很多问题,这也没什么不同。除了我找不到解决办法。我擅长HTML和CSS,但我对JavaScript和JQuery知之甚少。

我正在尝试应用here 在我的网站上。我会找出这个代码是否适合我。

问题是这个。我在正确的位置复制了HTML,在正确的位置复制了CSS。我还将JavaScript复制到/assets/js/script。js公司

使用适当的函数,此脚本将在函数中排队。php文件。

function mytheme_scripts() {
    wp_enqueue_script( \'script\', get_template_directory_uri() . \'/assets/js/script.js\', true );
}
add_action ( \'wp_enqueue_scripts\', \'mytheme_scripts\');
我可以在我的页面头部看到文件,但它似乎不起作用。现在,我可以调整事情或编辑代码,但根据JavaScript,应该在类中添加一个div。代码,但这不会发生。这就是我可以看到我的文件被正确添加,但没有正确执行或根本没有执行的方式。

对于我的生活和我鲜为人知的JavaScript知识,我不知道为什么。

2 个回复
最合适的回答,由SO网友:Adeel Nazar 整理而成

您的Js代码应该在文档中。ready函数如果WordPress正确调用了jQuery,但发生了$sign not defined错误,则需要用它包装代码。

jQuery(document).ready(function($){
    "use strict";

   //Your Js Code Here 

});

SO网友:Chris Stage

在你的脚本和你如何在你的主题中排队时,有几件事需要考虑。

Script names must be unique when enqueued

考虑一下,如果您有一个名为“script”的脚本和另一个名为“script”的脚本,wordpress将只选择一个。可能是“脚本”已被执行,您可能需要重命名它。

function mytheme_scripts() {
    wp_enqueue_script( \'my_theme_script\', get_template_directory_uri() . \'/assets/js/script.js\', true );
}
add_action ( \'wp_enqueue_scripts\', \'mytheme_scripts\');

jQuery runs in no-conflict mode with wordpress

这意味着$尚未定义为jQuery。用jQuery替换所有$,或者在函数内部定义jQuery。例如,对于您链接的代码笔片段,我将执行以下操作:

      (function( $ ) {
    \'use strict\';

    $(function() {

        $(\'.tile\')
        // tile mouse actions
            .on(\'mouseover\', function(){
                $(this).children(\'.photo\').css({\'transform\': \'scale(\'+ $(this).attr(\'data-scale\') +\')\'});
            })
            .on(\'mouseout\', function(){
                $(this).children(\'.photo\').css({\'transform\': \'scale(1)\'});
            })
            .on(\'mousemove\', function(e){
                $(this).children(\'.photo\').css({\'transform-origin\': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + \'% \' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +\'%\'});
            })
            // tiles set up
            .each(function(){
                $(this)
                // add a photo container
                    .append(\'<div class="photo"></div>\')
                    // some text just to show zoom level on current item in this example
                    .append(\'<div class="txt"><div class="x">\'+ $(this).attr(\'data-scale\') +\'x</div>ZOOM ON<br>HOVER</div>\')
                    // set up a background image for each tile based on data-image attribute
                    .children(\'.photo\').css({\'background-image\': \'url(\'+ $(this).attr(\'data-image\') +\')\'});
            })

    }); //End Function



  })( jQuery );

Troubleshooting

使用浏览器检查器窗口查看是否存在控制台错误。您还可以使用此窗口查看源是什么。因此,您可以查看源代码中的JS文件是否正确qued。请注意,对于JS和CSS文件,它们通常由浏览器缓存,有时需要硬刷新才能看到更改!

希望这能帮助你解决问题!

结束

相关推荐

不只包括在主页上的JavaScript文件

我在加载自己的javascript文件时遇到问题,这个问题只出现在主页上,在其他页面上也可以。现在我对交互性有问题,因为只有在主页上我才能做到这一点。内部功能。php我以这种方式包含了自己的脚本: function monaco_assets_js(){ wp_enqueue_script(\'script\', get_stylesheet_directory_uri() . \'../js/script.js\', array(\'jquery\'), \'1.0.0\