jQuery image src attribute broken in IE7
I'm using jQuery (in an ASP.Net 2.0 website written in C#, FWIW) to handle a fairl开发者_C百科y simple div expansion and image swap (for display state indication) and it's working like a charm in FF 3.5.5 but failing in IE 7, and I'm wondering if you fine folks might be able to help me ascertain why that would be.
I'm loading jQuery 1.3.2 from google code, finding some elements in the dom, toggling visibility on a few and then changing the source attribute of the displaystate image. Adding an alert of the displaystate image's src attribute in Firefox results in what I would expect, but in IE it's undefined.
Relevant code snippet follows:
<script language="javascript" type="text/javascript">
google.load("jquery","1.3.2");
</script>
<script language="javascript" type="text/javascript">
$(document).ready( function() {
$(".prodDownloadSection").click( function() {
var $catName = $(this).attr("id");
var $sectionName = $catName.substr(0,$catName.length-3);
var $productContainerDiv = $("#"+$sectionName);
$catDisplayState = $("#"+$sectionName+"displayState");
$productContainerDiv.slideToggle();
$productContainerDiv.toggleClass("selected");
$displayState = $productContainerDiv.prev("li").find("img.displayState");
alert($displayState.attr("src"));
if( $displayState.attr("src") == "img/placeholders/arrow-closed.gif") {
$displayState.attr("src", "img/placeholders/arrow-open.gif");
} else {
$displayState.attr("src", "img/placeholders/arrow-closed.gif");
}
});
});
</script>
There are no javascript errors, and the image in in place on the server, IE just doesn't even recognize the src attribute and so the if clause never evaluates to true.
Anyone have any ideas why I might not be getting the src of that image in IE?
Looking back at this 18 months later (and 18 months wiser, I hope) I finally figured out what the issues is.
Essentially, Firefox is doing the "wrong" thing here, because it's including parents in the return of the prev()
call. In the html architecture of this page the <li>
I'm looking for contains the $productContainerDiv
element, so prev()
rightly returns nothing in IE because there is no <li>
sibling of $productContainerDiv
.
When I change the prev("li")
to parent("li")
I get an element which is able to find the element defined by the selector ("img.displayState")
. If the site I was working on at the time was on jQuery >= 1.4, parentsUntil("li")
would be an even better solution.
The corrected code for the event handler should be as follows:
$(".prodDownloadSection").click( function() {
var $catName = $(this).attr("id");
var $sectionName = $catName.substr(0,$catName.length-3);
var $productContainerDiv = $("#"+$sectionName);
$productContainerDiv.slideToggle();
$productContainerDiv.toggleClass("selected");
$displayState = $productContainerDiv.parents("li").find("img.displayState");
if( $displayState.attr("src") == "img/placeholders/arrow-closed.gif") {
$displayState.attr("src", "img/placeholders/arrow-open.gif");
} else {
$displayState.attr("src", "img/placeholders/arrow-closed.gif");
}
});
Hope this helps someone along the road somewhere.
精彩评论