Question

我正在使用WordPress 3.8.1。我想使用此函数来使用粘性标题

<script>
$(document).ready(function() {
    var $header = $("header"),
        $clone = $header.before($header.clone().addClass("clone"));

    $(window).on("scroll", function() {
        var fromTop = $(window).scrollTop();
        console.log(fromTop);
        $("body").toggleClass("down", (fromTop > 200));
    });
});        
</script>

但它不适合我，我不知道为什么。我知道jQuery是与我的WordPress共享的，因为Flexslider 2现在工作正常。

Answer 1

添加：

var j = jQuery.noConflict();

现在你可以编写你的jQuery代码：

j(document).ready(function(){
    j('.class').event(function(){

      // your action............

    });
  });

只需将noConflict()函数分配给变量，并使用该变量代替jQuery代码中的$。

Answer 2

不要在脚本中运行jquery。这将打破wordpress中的其他脚本。

创建一个.js文件并将其包含在你的functions.php文件中。

*/**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );*

然后在.js文件中将代码包装在No Conflict包装器中。使用$（）将返回undefined否则。

jQuery(document).ready(function($) {
    var $header = $("header"),
        $clone = $header.before($header.clone().addClass("clone"));

    $(window).on("scroll", function() {
        var fromTop = $(window).scrollTop();
        console.log(fromTop);
        $("body").toggleClass("down", (fromTop > 200));
    });
});

Answer 3

这里的派对迟到了，但对此的正确解决方案是：

了解在WordPress中，jQuery以no conflict模式加载。这意味着$变量不引用jQuery。

但是，通过修改脚本以使用准备好无冲突的文档，您可以在函数中使用$。

按如下方式修改脚本：

// original code - doesn't work, because $ is not jQuery in WordPress
// $(document).ready(function() {
// shorthand no-conflict-safe document ready:
jQuery(function($) {
    // Now $ is safe to use - it references jQuery within this doc ready function
    var $header = $("header"),
        $clone = $header.before($header.clone().addClass("clone"));

    $(window).on("scroll", function() {
        var fromTop = $(window).scrollTop();
        console.log(fromTop);
        $("body").toggleClass("down", (fromTop > 200));
    });
});

Answer 4

您是否尝试在标题中设置jquery文件（假设您的模板文件夹中有jquery文件，但只要您正确引用它就可以在任何地方）：

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js"></script>

示例

$(document).ready(function(){
     $("#container").alert("blah");
     $(".goodshelf_ul li:first").css("border-top: none;");
     $(".custom_ul li:first").addClass("first");
     $("#footer .frame:last").css("margin: 0;");
     $("#footer .frame:last").addClass("last");
});

我在我的所有wordpress网站上使用jquery，它运行正常希望这有帮助。

即使其他加载的jQuery函数正在运行，自定义jQuery函数也无法在WordPress上运行

4 个答案: