javascript - 如何将 jQuery 代码绑定(bind)到某些页面上？

Question

我有一个基于 Wordpress 的网站(我认为这与这个问题无关，但我将其放在那里以防它影响答案)。

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

我使用的主题允许我勾选一个复选框以包含 jQuery，然后我有一个页脚脚本 block ，它可以提取该网站的自定义 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 菜鸟。

我上面的例子是最好/唯一的方法吗？如果不是，你将如何解决这个问题？

更新:澄清一下我的问题

这不是关于如何在某些页面上有条件加载脚本的问题。这是关于拥有一个下载一次的 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

I have a Wordpress based site (which I think is irrelevent to this question, but I'm putting it out there in case it impacts the answers).

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

WordPress 中的这些功能将允许您正确注册功能，并且还允许轻松过滤到您想要注册脚本的位置，并且还提供简单的方法来分离管理端脚本和常规前端脚本。这是在 WordPress 中加载脚本并过滤其外观的正确方法。

排队机制还将处理所有依赖项，并确保您的脚本仅在此类依赖项之后加载(例如 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

或者只是在 google 上搜索“正确加载 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