WordPress 中的 Jquery 网格覆盖

Question

我正在添加这个在静态 html 站点中工作的简单插件，并尝试将其添加到基于 960 gs 的 WordPress 开发站点中。 jquery 代码链接是正确的，但控制台给了我这个错误“Uncaught TypeError: Cannot call method 'addGrid' of null” 我从这个教程中得到了代码http://www.badlydrawntoy.com/2009/04/21/960gs-grid- overlay-a-jquery-plugin/

这是我正在使用的代码

/*<![CDATA[*/
    // onload
    $(function() {

        $("body").addGrid(12, {img_path: 'img/'});
    });
/*]]>*/

这是插件的代码

/*
 * @ description: Plugin to display 960.gs gridlines See http://960.gs/
 * @author: badlyDrawnToy sharp / http://www.badlydrawntoy.com
 * @license: Creative Commons License - ShareAlike http://creativecommons.org/licenses/by-sa/3.0/
 * @version: 1.0 20th April 2009
*/
(function($){$.fn.addGrid=function(cols,options){var defaults={default_cols:12,z_index:999,img_path:'/images/',opacity:.6};var opts=$.extend(defaults,options);var cols=cols!=null&&(cols===12||cols===16)?cols:12;var cols=cols===opts.default_cols?'12_col':'16_col';return this.each(function(){var $el=$(this);var height=$el.height();var wrapper=$('<div id="'+opts.grid_id+'"/>').appendTo($el).css({'display':'none','position':'absolute','top':0,'z-index':(opts.z_index-1),'height':height,'opacity':opts.opacity,'width':'100%'});$('<div/>').addClass('container_12').css({'margin':'0 auto','width':'960px','height':height,'background-image':'url('+opts.img_path+cols+'.png)','background-repeat':'repeat-y'}).appendTo(wrapper);$('<div>grid on</div>').appendTo($el).css({'position':'absolute','top':0,'left':0,'z-index':opts.z_index,'background':'#222','color':'#fff','padding':'3px 6px','width':'40px','text-align':'center'}).hover(function(){$(this).css("cursor","pointer");},function(){$(this).css("cursor","default");}).toggle(function(){$(this).text("grid off");$('#'+opts.grid_id).slideDown();},function(){$(this).text("grid on");$('#'+opts.grid_id).slideUp();});});};})(jQuery);

Answer 1

我很确定 WordPress 使用 Jquery.noConflict() 所以取决于你的调用方式jQuery 这可能是你的问题。尝试

    /*<![CDATA[*/
    // onload
    jQuery(function() {

        $("body").addGrid(12, {img_path: 'img/'});
    });
/*]]>*/