如何将jQuery脚本添加到单个页面？

时间：2013-06-27 作者：ISnoculrucdees

我有这个代码，我想添加到我的一个特定页面。我不想为它创建一个文件，然后包含etc（尽管请告诉我这是否是唯一的方法）。此外，我不希望它出现在标题中，因为它将包含在所有页面中。代码为：

<script type="text/javascript">
$(function () {
    $(\'input[name=done]:radio\').click(function () {
        if ($(this).val() === "Yes") {
            $(\'#p-days\').show();
        } else {
            $(\'#p-days\').hide();
        }
    });
    $(\'input[name=already-b]:radio\').click(function () {
        if ($(this).val() === "Yes") {
            $(\'#div-name\').show();
        } else {
            $(\'#div-name\').hide();
        }
    });
});
</script>

我通过选择文本（不是在视觉模式下）在编辑器中添加了这一点但它不起作用。知道我做错了什么吗？

谢谢

3 个回复

SO网友:Brooke.

虽然@s\\u ha\\u dum是正确的，但您将需要使用jQuery，WordPress中没有冲突，原始问题没有得到回答。

我有这个代码，我想添加到我的一个特定页面。

有几种方法可以做到这一点

基于主题函数中的页面名称/slug WordPress。此方法使用WordPress挂钩wp_enqueue_scripts

为脚本创建新的js文件my-nifty-custom.jsfunctions.php 添加以下内容

/* Enqueue scripts (and related stylesheets) */
    add_action( \'wp_enqueue_scripts\', \'my_nifty_scripts\' );
/**
 * Registers scripts for the theme and enqueue those used site wide.
 *
 * @since 0.1.0.
 */

function my_nifty_scripts() {
    wp_register_script(\'my-nifty-custom\', get_stylesheet_directory_uri() . \'/js/my-nifty-custom.js\', false, null, true);
if(is_page(\'page-slug-here\')){
    wp_enqueue_script(\'my-nifty-custom\'); 
}}

注意，如果您使用的是儿童主题或想做得更多，请将整个主题包装在after_setup_theme ie：

add_action( \'after_setup_theme\', \'nifty_theme_setup\' );
function nifty_theme_setup() {
// script function and other functions that should happen after the initial theme setup
}

基于Body类（基于DOM的路由）

这有点复杂。幸运的是，保罗·爱尔兰在这里写了一篇精彩的博客：http://www.paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/

如果使用此方法，它将基于Body类在每页上获取自定义JS。例如<body class="nifty">

然后您可以使用：

//clip 
 nifty : {
    init     : function(){ //custom script goes here }
  }
//clip

唯一的问题是页面必须具有您正在调用的body类。为此，WordPress具有以下功能body_class

add_filter(\'body_class\',\'nifty_class_names\');
function nifty_class_names($classes) {
    if(is_page(\'page-slug-here\')){
        $classes[] = \'nifty\';
    }

    return $classes;
}

那么你应该使用哪种方法呢我建议两者结合使用。创建一个使用Paul方法的JavaScript文件。然后使用wp_enqueue_scripts 调用该方法。

惰性标题。php方法最后，总是有一种懒惰的方法（我不推荐使用这种方法，但我只想作为参考。

在标题中。php您可以执行以下操作：

 <?php if(is_page(\'page-slug-here\')){
           echo (\'<script type="text/javascript" src="\'. get_stylesheet_directory_uri() . \'/js/my-nifty-custom.js"> </script>\'); 
        } ?>

SO网友:s_ha_dum

WordPress加载jQuery in "No Conflict" 模式“$”别名不起作用。使用完整的“jQuery”-jQuery.$.ajax({... 或者像jQuery文档中的示例那样包装脚本。。。

(function($) { 
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);

有关于此的信息in the Codex as well.

SO网友:John Negoita

每次我想在帖子和页面中使用jQuery插件时，我都会遇到这个问题。我的解决方案是创建一个通用jQuery插件短代码http://www.coding-dude.com/wp/web-design/javascript/how-to-use-jquery-plugin-with-wordpress-plugin-tutorial/

结束

小码农CODE

如何将jQuery脚本添加到单个页面？

相关推荐

Secure Pages Best Practice