为什么这个工具提示没有'不在IE工作吗?错误:应为对象
Why this tooltip don't work in IE? Error: Object expected?
你能告诉我这个代码哪里错了吗:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>tooltip</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
xOffset = 140;
yOffset = 50;
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
var mainImage = $(this).find("img").attr("src");
mainImageWidth = $(this).find("img").width();
$("body").append("<p id='preview-img'><img src='"+ mainImage +"' alt='Loading...' />"+ c +"</p>");
$("#preview-img")
.css("top",(e.pageY) + "px")
.css("left",(e.pageX + (mainImageWidth + yOffset)) + "px")
.fadeIn("normal");
},
function(){
this.title = this.t;
$("#preview-img").fadeOut("fast");
$("#preview-img").remove();
});
$("a.preview").mousemove(function(e){
$("#preview-img")
.css("top",(e.pageY) + "px")
.css("left",(e.pageX + (mainImageWidth + yOffset)) + "px");
});
});
</script>
<style>
#preview-img {
position: absolute;
border: 5px solid #6d6d6d;
background: #eaeaea;
padding: 8px;
display: none;
color: #6d6d6d;
text-align: center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
a.preview img {
display:none
}
</style>
</head>
<body>
<ul>
<li>
<a href="#" class="preview" title="Test 1">Test 1
<img src="http://images-3.findicons.com/files/icons/2117/nuove/128/camera_test.png" alt="Test 1">
</a>
</li>
<li>
<a href="#" class="preview" title="Test 2">Test 2
<img src="http://images-3.findicons.com/files/icons/2117/nuove/128/camera_test.png" alt="Test 2">
</a>
</li>
<li>
<a href="#" class="preview" title="Test 3">Test 3
<img src="http://images-3.findicons.com/files/icons/2117/nuove/128/camera_test.png" alt="Test 3">
</a>
</li>
<li>
<a href="#" class="preview" title="Test 4">Test 4
<img src="http://images-3.findicons.com/files/icons/2117/nuove/128/camera_test.png" alt="Test 4">
</a>
</li>
</ul>
</body>
</html>
它可以在FF、Chrome、Opera中工作,但在IE 8中我收到错误:应为Object。根据我在这里和互联网上读到的内容,当定义了两个相同的ID时,就会发生这种错误。但我看不到相同的ID:)
在外部定义var mainImageWidth;
似乎可以修复错误。我在IE 8中进行了测试。
jsFiddle
相关文章:
- dhtmlx多个调度器不工作错误”;调度程序未定义”;
- Javascript 确认框工作错误
- 变量中的类工作错误
- 为什么这个jQuery验证工作错误
- Cordova罗盘API(navigator.compass.watchHeading)不工作(错误代码3)
- Javascript不能在Chrome或IE9中工作-错误”;复选框未定义“;显示在FF JS控制台中
- JQuery UI对话框不能正常工作;错误信息“TypeError: undefined不是一个函数”
- Jquery/JS css动画在悬停时工作错误
- AngularJs Ng-Keypress事件工作错误
- Jquery 选择器不工作:错误:语法错误,无法识别的表达式:a[@href]
- 日期选择器范围工作错误
- 为什么我的Jquery Ajax请求不工作错误:未定义的索引:ProID
- 反应不工作.错误提示(index):13 Uncaught SyntaxError: Unexpected token
- 身份工具箱不工作-错误代码:IDP的错误响应
- jquery日期picker beforeShowDay工作错误的月份
- Javascript验证在c#中不工作(错误消息)
- 为什么?每个函数都工作错误
- 路由到api工作错误
- 子元素位置相对工作错误
- 从timeline2.6.1的例子不工作-错误链接是未定义的时间线代码0