问题

我正在研究一个带有很多jQuery的WordPress主题.默认情况下,WordPress不允许您使用$快捷方式,你必须使用完整的jQuery – 例如jQuery('.class')而不是$('.class').

这对于几行代码来说并不太麻烦,但我现在有很多,所以我使用以下方法将jQuery重新映射到$:

 (function($){

    ...my functions here...

})(window.jQuery);
 

这适用于从该文件中触发的函数,但如果我在PHP中使用任何内联触发器,它们就不再起作用.例如:

 <a onclick="loadFullPost('<?=get_permalink()?>?ajax=true','<?=$post->post_name?>',<?=$post->ID?>)">Read more</a>
 

重新拍摄之前工作正常,但现在没有.我无法像通常一样在js文件中绑定事件,因为我无法访问我需要的PHP和WordPress函数 – 除非我缺少一些东西.例如,这不起作用:

 $( "#target" ).click(function() {    
    loadFullPost('<?=get_permalink()?>?ajax=true','<?=$post->post_name?>',<?=$post->ID?>)    
});
 

有没有办法解决这个问题?

  最佳答案

问题是您的函数不再是全球性的.这是一个好事. (为什么.)

有没有办法解决这个问题?

到目前为止,最好的方法是不绑定这样的事件.相反,保持代码和标记的分离,并使用jQuery的on和类似的结合函数.详见下文.

但如果你觉得你必须,你可以通过在window上将函数分配为属性来使函数全球化:

 (function($) {
    window.loadFullPost = function() {
        // ...
    };
)(jQuery);
 

要么

 (function($) {
    function loadFullPost() {
        // ...
    }

    window.loadFullPost = loadFullPost;
)(jQuery);
 

所以你会怎么做

 <a onclick="loadFullPost('<?=get_permalink()?>?ajax=true','<?=$post->post_name?>',<?=$post->ID?>)">Read more</a>
 

...没有使用全局函数?像这样:

 <a class="load-full-post" data-permalink="<?=get_permalink()?>" data-ajax=true data-post-name="<?=$post->post_name?>" data-post-id="<?=$post->ID?>">Read more</a>
 

然后是一个处理程序

 $(document).on("click", ".load-full-post", function() {
    var link = $(this);
    // Use the values from link.attr("data-permalink") and such
    // to do the work
});
 

或者如果您想使用您现有的loadFullPost函数:

 $(document).on("click", ".load-full-post", function() {
    var link = $(this);
    return loadFullPost(
        link.attr("data-permalink"),
        link.attr("data-ajax") === "true",
        link.attr("data-post-name"),
        +link.attr("data-post-id")  // (+ converts string to number)
    );
});
 

我应该提到,你会让人们告诉你通过data函数访问这些data-*属性.你可以这样做,但除非你正在使用data的各种附加特性,它是不必要的开销(为数据创建jQuery缓存等). data不是data-*的访问函数,它比这更多(和更少).

您还可以将信息传递给JSON:

 <a class="load-full-post" data-postinfo="<?=htmlspecialchars(json_encode(array("permalink" => get_permalink(), "ajax" => true, "name" => $post->post_name, "id" => $post->ID))0?>">Read more</a>
 

(或者类似的东西,我的PHP-fu很弱)

然后:

 $(document).on("click", ".load-full-post", function() {
    var postInfo = JSON.parse($(this).attr("data-postinfo"));
    return loadFullPost(
        postInfo.permalink,
        postInfo.ajax,
        postInfo.name,
        postInfo.id
    );
});
 

为什么使函数非全局化是一个好事:全局名称空间非常拥挤,特别是当您处理多个脚本和插件以及Wordpress本身时.您创建的全局越多,与另一个脚本发生冲突的可能性就越大.通过在范围界定函数中很好地包含您的函数,您可以避免对其他人的函数/元素/任何东西和vice-notes的可能性.

  相同标签的其他问题

javascriptphpjquerywordpress