注册/入队脚本

时间:2014-07-29 09:23:32

标签: jquery javascript

我想要整洁并将所有JS放入.js文件并注册并排队。到目前为止,我做到了“很棒”的成功。我的主题是我的functions.php:

wp_register_script( 'myscript', get_stylesheet_directory_uri() . '/js/jquery.myscripts.js', array( 'some-other-script' ), '1.0.6', true );

像这样,脚本是在创建DOM的JS脚本之后调用的,我希望在我的JS文件中使用它。我的网站来源似乎很好看:

<script type="text/javascript" src="http://example.com/wp-content/plugins/some-other-plugin/lib/some-other-plugin/some-other-script.js?ver=3.2.2"></script>
<script type="text/javascript" src="http://example.com/wp-content/themes/some-theme/js/jquery.myscript.js?ver=1.0.5"></script>

在相关网页的模板文件中,我添加了:

<?php wp_enqueue_script( 'myscript' ); ?>

这是我的JS代码,它仍会打印“Detected small enough window”,但之后不执行任何代码。

var bMenuVisible = true;

jQuery(function ($) {   
    $( document ).ready(function() {
    if( $( window ).width() < 850 ){

        console.log( "Detected small enough window" );

        $( ".someClass" ).click(function() {

            console.log( "Clickedy Click" );

            if (bMenuVisible == true) {
                $( ".some-other-class" ).fadeOut( "slow", function() {
                    console.log( "fading out!" );
                });

                bMenuVisible = false;
            }
            else {
                $( ".some-other-class" ).fadeIn( "slow", function() {                       
                    console.log( "fading in!" );
                }); 

                bMenuVisible = true;    
            }
        });
    }

现在谈到WP相关的问题,当我将代码添加到页面本身的模板时,它就像一个魅力,但是一旦我将它注册为脚本并在同一个地方排队,它就停止了工作/也许停止看DOM。所以我不禁想知道我在登记期间是否做错了什么并入队?


我已经将JS更改为以下方式,没有anno函数和一些更好的分离,但仍然没有工作:(

var bMenuVisible = true;

function myApp () {
jQuery('.royalSlider').royalSlider('updateSliderSize', true);
console.log( "ready!" );
console.log( "Window width: " + jQuery( window ).width());

if( jQuery( window ).width() < 850 ){

    console.log( "Detected small enough window" );

    jQuery( ".someClass" ).click(function() {

        console.log( "Clickedy Click" );
        console.log( jQuery( document ).ready() );

        if (bMenuVisible == true) {
            jQuery( ".some-other-class" ).fadeOut( "slow", function() {
                console.log( "fading out!" );
            });

            bMenuVisible = false;
        }
        else {
            jQuery( ".some-other-class" ).fadeIn( "slow", function() {                      
                console.log( "fading in!" );
            });

            bMenuVisible = true;    
        }
    });
 }              

}

jQuery( document ).ready( myApp );

1 个答案:

答案 0 :(得分:0)

阅读这篇文章:http://lostechies.com/derickbailey/2012/05/22/function%E2%80%A6-vs-function%E2%80%A6-or-domready-vs-the-module-pattern/

问题很可能是:

jQuery(function ($) {   
    $( document ).ready(function() {

我没有看到调用等待DOM准备好的匿名函数的重点。