1

我有一个基于 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 菜鸟。

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

更新：澄清一下我的问题

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

4

2 回答 2

1

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

它实际上是相关的，因为那时你应该使用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 条件标签轻松控制前端的页面：

 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-正确

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

另一种不太推荐的方法是使用wp_footerandwp_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
于 2013-11-14T02:12:54.157 回答
0

只需使用 .each() ( info )：

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

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

$('#myhelpform').each(function( index ) {
    myhelpform(this);
});
于 2013-11-14T02:08:24.473 回答