Javascript jQuery脚本的Drupal 7 TypeError:$不是函数
我有一些JS代码,但Drupal7不认识它。我得到以下错误:Javascript jQuery脚本的Drupal 7 TypeError:$不是函数,javascript,jquery,drupal,drupal-7,Javascript,Jquery,Drupal,Drupal 7,我有一些JS代码,但Drupal7不认识它。我得到以下错误: TypeError: $ is not a function 有人能帮我把这个脚本做好吗?我正在使用jqueryv1.4.4 <script type="text/javascript"> this.screenshotPreview = function(){ /* CONFIG */ xOffset = 10; yOffset = 30; // these 2 variable d
TypeError: $ is not a function
有人能帮我把这个脚本做好吗?我正在使用jqueryv1.4.4
<script type="text/javascript">
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.screenshot").hover(function(e){
this.t = this.title;
// this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#screenshot").remove();
});
$("a.screenshot").mousemove(function(e){
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
screenshotPreview('some text');
});
</script>
this.screenshotPreview=函数(){
/*配置*/
xOffset=10;
yOffset=30;
//这两个变量确定弹出窗口与光标的距离
//您可能需要调整以获得正确的结果
/*结束配置*/
$(“a.屏幕截图”).hover(函数(e){
this.t=this.title;
//this.title=“”;
var c=(this.t!=”)?“
”+this.t:”;
$(“正文”)。追加(“”+c+”
”;
$(“截图”)
.css(“顶部”(e.pageY-xOffset)+“px”)
.css(“左”(e.pageX+yOffset)+“px”)
.fadeIn(“快速”);
},
函数(){
this.title=this.t;
$(“#屏幕截图”).remove();
});
$(“a.screenshot”).mousemove(函数(e){
$(“截图”)
.css(“顶部”(e.pageY-xOffset)+“px”)
.css(“左”(e.pageX+yOffset)+“px”);
});
};
//在页面加载时启动脚本
$(文档).ready(函数(){
截屏预览(“一些文本”);
});
尝试将“$”快捷方式的所有实例更改为“jQuery”,它应该可以工作。例如,调用screenshotPreview函数如下所示:
// starting the script on page load
jQuery(document).ready(function(){
screenshotPreview('some text');
});
或者,将所有jQuery代码封装在一个函数中,并使用jQuery作为参数,$shortcut应该可以工作
// We define a function that takes one parameter named $.
(function ($) {
// Use jQuery with the shortcut:
console.log($.browser);
// Here we immediately call the function with jQuery as the parameter.
}(jQuery));
(来源:)Drupal7在中提供jQuery,这意味着
$
不是jQuery
对象/命名空间。对于正确编写的jQuery插件来说,这不应该是一个问题
期望$
成为jQuery命名空间的JavaScript代码在Drupal页面中不起作用。这可以通过将代码包装在立即调用的匿名函数中轻松解决,该函数将jQuery命名空间别名为$
:
(function($) {
// Here $ is the jQuery namespace.
})(jQuery);
试试这个:(如果这样做不对,请告诉我——但这似乎对我有用)
/*******************************************************************
*::定义您的函数::
*******************************************************************/
(函数($){
removeAjaxLoader=函数(){
log('removeAjaxLoader');
$('body').find('ajax loader').remove();
$('body').find('.ajax加载程序图标').remove();
返回false;
}//removeAjaxLoader
addAjaxLoader=函数(){
log('addAjaxLoader');
removeAjaxLoader();
$('body')。追加('');
返回false;
}//addAjaxLoader
})(jQuery);
/*******************************************************************
*::准备就绪,开始:
*******************************************************************/
(函数($){
$(文档).ready(函数(){
console.log('ready complete');
removeAjaxLoader();
});//document.ready
})(jQuery);
您必须在脚本之前包含jQuery。jQuery包含在head中脚本的顶部。对于应该处理元素的代码,您可能需要使用Drupal.behaviors。请参阅以获得一些解释。jQuery自己的文档中也对这一点进行了很好的解释,在专门用于编写插件的章节中:。
/*******************************************************************
* :: Define Your Functions ::
*******************************************************************/
(function ($) {
removeAjaxLoader = function() {
console.log('removeAjaxLoader');
$('body').find('.ajax-loader').remove();
$('body').find('.ajax-loader-icon').remove();
return false;
} //removeAjaxLoader
addAjaxLoader = function() {
console.log('addAjaxLoader');
removeAjaxLoader();
$('body').append('<div class="ajax-loader"></div><div class="ajax-loader-icon"></div>');
return false;
} //addAjaxLoader
}) (jQuery);
/*******************************************************************
* :: Ready Set Go ::
*******************************************************************/
(function ($) {
$(document).ready(function() {
console.log('ready complete');
removeAjaxLoader();
}); // document.ready
}) (jQuery);