jquery .attr('alt','logo').css('display','none') not working !!!

Question

I have the three following lines and the first two line gets all the images on the document and hides all, but then when I add the third line shows all the images.

What I need its to hide only the images with the attribute alt=minimize and alt=maximize but for some reason hides all the images.

$('img').attr('alt', 'minimize').css("display","none");
$('img').attr('alt', 'maximize').css("display","none");


$('img').attr('alt', 'logo').css("display","inline");

I am using IE7, but it should be compatible with IE6 and IE8.

Any help would be very much appreciated.

Thanks.

Answer 1

what you do: you take every img in document and set alt to logo and then set display: inline;.

Note, that attr('alt',string) doesn't filter all images to those with alt=string, but rather sets alt attribute to string on all images.

What you want to use is this:

$('img[alt="minimize"]').css...
$('img[alt="maximize"]').css...

$('img[alt="logo"]').css...

Answer 2

I'm thinking you are not using the attr function correctly, might you be looking for the attribute equals selector?:

$('img[alt=minimize]').css("display","none");

What you did with your code was,

1. Select all images
2. Change their alt attribute to 'minimize'
3. Hide them
4. Select all images
5. Change their alt attribute to 'maximize'
6. Hide them
7. Select all images
8. Change their alt attribute to 'logo'
9. Hide them

Answer 3

In the call $('img').attr('alt', 'logo').css("display","inline"); the "attr" doesen't filter the set of dom elements You catch with $("img").

If you want to hide everithing but not the image with the attribute 'alt' = 'logo' I think You can:

give it an Id of logo and then calling: $("img").not("#logo").hide()

from the jquery website:

hide():

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none'), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

and

attr( attributeName ) Returns: String

Description: Get the value of an attribute for the first element in the set of matched elements.

If instead you want to hide all the maximize and minimize images (both share the "imize" part of the attribute): $(parentElement).find("img[@attr $= '*imize']").hide()