Question

我有一个基于WordPress的网站（我认为这个问题是无关紧要的，但我会把它放在那里以防它影响答案）。

我希望将javascript保留在页面/帖子内容之外。我在几个不同的页面上引入了一些jQuery功能用于表单验证，我试图将我的javascript保存在一个文件中。

我正在使用的主题让我勾选一个复选框以包含jQuery，然后我有一个页脚脚本块，它为我的网站提供了自定义的javascript。

当页面准备就绪时，我想运行javascript来使用jQuery自定义每个特殊页面及其代码来连接事件/验证代码。

我目前正在这样做：

jQuery(document).ready(function($) {
    el = $('#myhelpform'); 
    if (el.length > 0)
    {  
        myhelpform(el);
    }

    el = $('#pkform');
    if (el.length > 0)
    {
        pkform(el);
    }

    el = $('.buynowreceipt')
    if (el.length > 0)
    {
        ...
    }      
});  // ready

...将特定功能保留在不同的功能中，但我想知道这是否可行。我是一个javascript / jQuery noob。

我的榜样是否是最佳/唯一的方法，如果没有，你会如何解决这个问题？

更新：稍微澄清一下我的问题

这不是关于如何在某些页面上加载脚本的问题。它是关于一个js文件被下载一次，是在缓存中，但不必根据页面的主体类或页面上存在表单或其他东西来运行某些页面特定的东西。

例如，我最近学会了上面代码的替代方法：

jQuery(document).ready(function($) {
    el = $('#myhelpform'); 
    if (el.length > 0)
    {  
        myhelpform(el);
    }
});


jQuery(document).ready(function($) {
    el = $('#pkform');
    if (el.length > 0)
    {
        pkform(el);
    }
});

jQuery(document).ready(function($) {
    el = $('.buynowreceipt')
    if (el.length > 0)
    {
        ...
    }      
});

我只是想在第一时间学会如何做好。

谢谢给Obmerk以正确的方式解释了在Wordpress中有条件地加载脚本。

Answer 1

我有一个基于Wordpress的网站（我认为这是无关紧要的问题，但是我把它放在那里，以防它影响到答复）。

它实际上是相关的，因为那样你应该使用wp_register_script()和wp_enqueue_script() ..

wordpress中的这些功能将允许您正确注册这些功能，并允许您轻松过滤到您希望脚本注册的位置，还提供了分离管理员脚本和常规正面脚本的简便方法。这是在wordpress中加载脚本并过滤其外观的正确方法。

enqueue mechanisem还将处理所有依赖项，并确保您的脚本仅在此类依赖项之后加载（例如jQuery）

像这样（管理员区域）：

add_action('admin_enqueue_scripts', 'o99_cfsa_admin_load_scripts');

function o99_cfsa_admin_load_scripts($hook){ // notice the HOOK for admin pages

if( $hook != 'widgets.php' ) // this will load only on widgets pages admin 
        return;
// in this example , the chosen_k script will not load before the dependecies (first jquery, then chosen , then custom chosen_k script..)
    wp_enqueue_script('chosen', plugins_url( '/js/chosen.jquery.js', __FILE__ ), array('jquery'),'099',TRUE); 
    wp_enqueue_script('chosen_k', plugins_url( '/js/k99.chosen.init.js', __FILE__ ), array('jquery','chosen'),'099',TRUE); 
    wp_enqueue_style('chosencss', plugins_url( '/js/chosen.css', __FILE__ ), array(),'all'); 

}

该示例适用于管理员方面，但要在正面使用它，您只需要使用不同的操作：

        add_action('enqueue_scripts', 'o99_cfsa_load_scripts'); // Different action

    function o99_cfsa_load_scripts(){ 

    if( is_front_page() ) // example : this will load on all EXCEPT front page 
            return;
    // in this example , the chosen_k script will not load before the dependecies (first jquery, then chosen , then custom chosen_k script..)
        wp_enqueue_script('chosen', plugins_url( '/js/chosen.jquery.js', __FILE__ ), array('jquery'),'099',TRUE); 
        wp_enqueue_script('chosen_k', plugins_url( '/js/k99.chosen.init.js', __FILE__ ), array('jquery','chosen'),'099',TRUE); 
        wp_enqueue_style('chosencss', plugins_url( '/js/chosen.css', __FILE__ ), array(),'all');
}

这样您就可以使用简单的wp conditional tags轻松控制前端的页面：

 if ( is_front_page() ) {
wp_enqueue_script('chosen', plugins_url( '/js/chosen.jquery.js', __FILE__ ), array('jquery'),'099',TRUE);
}

或在你的情况下

 if ( is_single( array( 17, 19, 1, 11 ) )  ) { // array of your single posts ID´s 
wp_enqueue_script('chosen', plugins_url( '/js/chosen.jquery.js', __FILE__ ), array('jquery'),'099',TRUE);
}

甚至

is_page( 'my-page' ) // for pages, using slug . see the conditional tags .

请注意，首先注册，然后将脚本排入队列总是更好。（阅读上面链接的功能的文档）

在此处查看更多信息：

http://scribu.net/wordpress/optimal-script-loading.html

http://www.paulund.co.uk/add-stylesheets-to-wordpress-correctly

或只是搜索谷歌“正确加载javascript wordpress”

另一种方式，更不用说建议使用wp_footer和wp_head操作直接打印脚本（但同样，不是最佳做法）：

    function your_script_print_function() {
if ( is_single( array( 17, 19, 1, 11 ) )  ){
        echo '<script type="text/javascript">

            // <![CDATA[

                jQuery(document).ready(function() {
                           // your script here ..
                });

            // ]]>

        </script>'; 
}
    }
    add_action('wp_footer', 'your_script_print_function', 100); // or wp_head

Answer 2

只需使用.each（）（info）：

$('#myhelpform').each(function( index ) {
    // do stuff
});

如果你想分离出函数，我认为你必须将函数调用包装在每个函数中，如下所示：

$('#myhelpform').each(function( index ) {
    myhelpform(this);
});

如何将jQuery代码绑定到某些页面？

2 个答案: