IE is doing strange things with JQuery
So ... The thing is, the code works in FireFox, no problems. But when I open the same page, it gives me the following error:
"Undefined is null or not an object."
But when I copy the code to a localhost page, it works fine. Also when I clear my cache in IE it works, but only once, if I refresh after that one load, it gives me the same error.
Here is the code:
<script type="text/javascript" src="datepicker/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var count3 = 0;
var count5 = 0;
var count2 = 0;
var count4 = 0;
$(document).ready(function(){
$('#switch3').cl开发者_运维百科ick(function(){
$('#switchDiv3').slideToggle(350);
if(count3 == 0){
count3 = 1;
document.getElementById('switchImage3').src = "images/ArrowDown.png";
return;
} else {
count3 = 0;
document.getElementById('switchImage3').src = "images/ArrowRight.png";
return;
}
});
... (this is the code for each item that is generated)
</script>
And the code that determines the div that should hide:
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="20" align="center" valign="top" style="padding-right: 3px">
<a style="cursor: pointer;" id="switch3"><img width="20" height="20" src="images/ArrowRight.png" id="switchImage3" style="border-style: solid; border-width: 1px; border-color: black;"/></a>
</td>
<td>
<div id="switchDiv3">
<div align="left">
(Contents of the div here)
</div>
</div>
</td>
</tr>
</table>
Any help is appreciated!
Thanks in advance
You need to describe what you want to do. I guess you want to show and hide a div and switch an arrow from left to right when you do.
You could use the toggle function, its really cool, heres an exemple of something near you want (i guess).
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#switch3").toggle(function(){
$("#switch3").html('<-');
$("#switchDiv3").slideToggle(350);;
}, function(){
$("#switch3").html('->');
$("#switchDiv3").slideToggle(350);
});
});
</script>
</head>
<body>
<div>
<a id="switch3" style="cursor: pointer;"> -> </a>
<div id="switchDiv3" style="background-color: red">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</body>
By the way, i used inline styling only for the exemple, you should use external stylesheet.
So ...
The prototype function didn't work either, no clue as to why ... So now I'm just gonna try to change the display attribute.
No luck either. The script changes the arrow, but it doesn't hide the div ...
Here is the code:
var count3 = 0;
function showHideDiv3(){
if(count3 == 0){
document.getElementById('switchDiv3').style.display = '';
document.getElementById('switchImage3').src = "images/ArrowDown.png";
count3 = 1;
}else{
if(count3 == 1){
document.getElementById('switchDiv3').style.display = 'block';
document.getElementById('switchImage3').src = "images/ArrowRight.png";
count3 = 0;
}
}
}
The names of the div's are correct. I have checked, and 3 of my colleagues have also doublechecked.
This is driving me crazy and depressed lol.
Are you just trying to swap icons to indicate status? If so, just select the src attribute of an id placed on the image and swap graphics.
So, use something like:
$('#swtichImage3').hover(function() {
$(this).attr('src', 'images/ArrowDown.png');
}, function(){
$(this).attr('src', 'images/ArrowRight.png');
});
In that example, I'm using the hover() action but you can swap that. I just wanted to put that to show an easier way of swapping src attribute.
加载中,请稍侯......
精彩评论