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

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').c开发者_如何转开发ss("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.

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

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...

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()

OP is referring to

http://dev.w3.org/csswg/css3-values/#attr

alt I think is simply a string type, not "logo" whatever that is, that is not a data type. try that. in fact, you can look up alt in the html5 img

http://www.w3.org/TR/html5/the-img-element.html#the-img-element

http://www.w3.org/TR/html5/the-img-element.html#attr-img-alt

http://www.w3.org/TR/html5/the-img-element.html#alt

(in order of reference clicking, last one is the target)

even if this isn't the exact answer (it should be), it should be a step in the right direction.

I am actually trying myself to figure out how to reference a css property within css with attr() - it's mentioned within the top URL. if I had my druthers, I could be using css calc() along with it, but that's draft. maybe I can get it to work...