Question

我正在添加这个简单的插件，我在一个静态的html网站上工作，并试图将它添加到基于960 gs的wordpress开发网站。 jquery代码链接是正确的，但是控制台给了我这个错误“Uncaught TypeError：无法调用方法'addGrid'为null”我从这个turtorial 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/'});
    });
/*]]>*/

在wordpress中的Jquery网格覆盖

1 个答案: