[jQuery] Why does :not([id=blah]) not work?
Hi there,
I'm just starting to explore using jQuery. Like it so far, but I'm
totally thrown by this.
On a page, I'm trying to hide all images in a set except the first
one. Then, when you click on a menu link, another should fade in, and
all others fade out.
The second part works - when you click on a link tag, the image w/ the
ID listed as the href of the link fades in, and any others that are
visible fade out. I'm using this:
$("#central img:not([id=href])").fadeOut("slow");
So I copied that syntax to the initial .ready function, like this:
$("#central img:not([id=thefirst])").hide();
This variable ('thefirst') is created using jQuery.url.attr("anchor"),
whereas 'href' is created using $(this).attr("href"), where (this)
refers to the associated link. I think the key has to be there
somehow, but I don't see it.
I've posted this page at http://jeremycarlson.com/test/jq/portfolio.htm
(there are several alerts thrown in so I can see what the variables
are at any given time, which makes the load a little odd) I just can't
see what's going wrong.
Thanks in advance for any help anyone might offer.
Here is the full js code:
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.url.packed.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if(undefined != jQuery.url.attr("anchor")) {
var anchor = jQuery.url.attr("anchor");
var thefirst = "#"+anchor;
alert (thefirst);
} else {
var thefirst = "#view1";
alert(thefirst);
}
$("#central img:not([id=thefirst])").hide();
$("#central img").css({position:"absolute"});
$("#view-menu a").click(function(event){
$(this).focus();
var href = $(this).attr("href");
alert(href);
$("#central img:not([id=href])").fadeOut("slow");
$(href).fadeIn("slow");
event.PreventDefault;
});
});
</script>
Thank you,
Jeremy Carlson