jQuery 插件功能在 Firefox 中不起作用...但在 IE 中起作用
我有一个 html 文件引用 .js 文件。 js 文件有一个定义为插件的 jQuery 函数。 html 文件中有一些超链接，单击后应展开显示详细说明（隐藏在页面上）。现在这种安排在 IE8 下有效，但在 Fire Fox 上无效。我最初使用的是 Firefox 3.6.13 ....并将其升级到 Firefox 4 ...这两个版本都不起作用。这是一个虚拟的 html 文件（为了简单起见）和 .js 文件内容
HTML：
<html>
<head>
<style>
span { background:#def3ca; padding:3px; float:left; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script src="path/to/jquery/file/jquery.compand.js"></script>
</head>
<body>
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td width="13%" valign="top">Job Code </td>
<td width="87%" valign="top">Job Title </td>
</tr>
<tr>
<td valign="top">2223 </td>
<td valign="top"><a class="click" id="2223" href="#">Systems Analyst </a>
<div class="text" id="2223text"><span>This text was hidden before.</span></div>
</td>
</tr>
<script>$(".click").compand();</script>
</body>
</html>
这是我的 js 文件，其中包含定义 compand() 函数的 jQuery 插件。
(function( $ ){
$.fn.compand = function(){
return this.click(function() {
alert('item id: '+this.id);
$("#"+this.id+"text").toggle("slow");
});
};
})(jQuery);
更令我惊讶的是，如果我没有将 .js 文件嵌入到标签之间的 html 文件中，那么它可以在 Firefox 和 IE8 上运行良好。这是脚本：
<script>
$('.click').click(function() {
// get id of the clicked item
alert('id clicked: ' + this.id);
$("#"+this.id+"text").toggle('slow',
function() {
alert('Animation complete.');
});
});
</script>
我需要将此函数作为 jQuery 插件，这样我就不会在多个 html 页面上复制上述代码。感谢您到目前为止的阅读！任何指示表示赞赏。
I have a html file which refers to a .js file. The js file has a jQuery function defined as a plugin. There are a few hyper-links in the html file..which when clicked should expand showing detailed description (which is hidden on the page). Now this arrangement works under IE8 but does not on Fire Fox. I initially had Firefox 3.6.13 ....and upgraded it to Firefox 4...it did not work for either versions. Here is a dummy html file(to keep it simple) and .js file contents
HTML:
<html>
<head>
<style>
span { background:#def3ca; padding:3px; float:left; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script src="path/to/jquery/file/jquery.compand.js"></script>
</head>
<body>
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td width="13%" valign="top">Job Code </td>
<td width="87%" valign="top">Job Title </td>
</tr>
<tr>
<td valign="top">2223 </td>
<td valign="top"><a class="click" id="2223" href="#">Systems Analyst </a>
<div class="text" id="2223text"><span>This text was hidden before.</span></div>
</td>
</tr>
<script>$(".click").compand();</script>
</body>
</html>
and here is my js file containing jQuery plugin defining compand() function.
(function( $ ){
$.fn.compand = function(){
return this.click(function() {
alert('item id: '+this.id);
$("#"+this.id+"text").toggle("slow");
});
};
})(jQuery);
What further surprises me is if instead of having a .js file I have the following code embedded in html file between tags....it works well on Firefox and IE8 both. Here is the script:
<script>
$('.click').click(function() {
// get id of the clicked item
alert('id clicked: ' + this.id);
$("#"+this.id+"text").toggle('slow',
function() {
alert('Animation complete.');
});
});
</script>
I require to have this function as a jQuery Plugin so that I do not replicate the above code on several html pages. Thanks for reading so far! Any pointers appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这种方法怎么样？您会遇到什么错误？
What about this approach and what errors do you get?
我已经找到了这种行为的原因，而且对于我来说我是如何搞砸的，这让我感到非常尴尬。 Luceos 感谢您的投入！...他们确实帮助了我。
经过一天的绞尽脑汁之后...我发现 jquery 插件的路径是 Firefox 很难弄清楚的东西。我在这里解释一下：
我有以下设置。我的桌面上有 .html 和 .js 文件，正如您在下面看到的，我提供了完全限定的路径来指向我的 jQuery 函数。
( Windows 分隔符）或者
(Unix 分隔符)IE8 可以计算两者并正确拾取 .js 文件，但 FireFox（3.6.13 和 4.0）没有。
相反，当我在相同的上下文中提供相对路径时：（
因为我的 .html 和 .js 文件完全位于同一文件夹中）
现在这适用于 FireFox 和 IE 8
I have found a reason for this behavior and its quite embarrassing for me to mention how I messed. Luceos thanks for your inputs!.. they have certainly helped me.
After another day of breaking my head over it...I figured out that the path-to-jquery plugin was something that Firefox was finding hard to figure out. Let me explain it here:
I had the following setup. I had both .html and .js file on my Desktop and as you can see below I provided fully-qualified-path to point to my jQuery function.
<script src="C:\\Users\\******\\***\\testjQuery\\jquery.compand.js"></script>(Windows separator)OR
<script src="C:/Users/****/****/testjQuery/jquery.compand.js"></script>(Unix separator)IE8 is able to figure both and pick up the .js file correctly but FireFox (3.6.13 and 4.0)did not.
Instead when I provided a relative path i.e. in the same context:
(since my .html and .js file are exactly in same folder)
Now this works on both FireFox and IE 8