jQuery button click change image

Question

$("#button").click(function () {
    //debugger;
    if ($("img[id=image][src:contains(Grass)]"))
        $("img").attr({ src: "/Content/images/Spring.jpg", alt: "Spring" });
    else
        $("img").attr({ src: "/Content/images/Grass.jpg", alt: "Grass" });
});

<a href="/Content/images/Grass.jpg"><img src="/Content/images/Grass.jpg" alt="image"    id="image"/></a>
<input type="button" id="button" name="button"/>

I have simple form with image and button, i want on each button click image getting changed. The logic is very simple. By default image src = /Content/images/Grass.jpg When i click button first time image getting changed, but when i am click second time it is does not changed back. I check in debugger and find out that condition $("img[id=image][src:contains(Grass)]") always true. But after first button click shouldn't it became false then?

if i declare

    var img1 = $("img#image[src:contains(Grass)]");
    var img2 = $("img#image[src:contains(Grass2)]");
    var img3 = $("img#image[src:contains(blabla)]");

each img1.length = 1 img2.length = 1 img3.length = 1 Why?

but

var img1 = $("img#image[src*='Grass']");
var img2 = $("img#image[src*='Grass2']");
var img3 = $("img#image[src*='blabla']");

each img1.length = 1 img2.length = 0 img3.length = 0 it is what was expected.

Does it means that src:contains(text) and src*=text is so different?

sod · Accepted Answer · 2011-01-30 02:04:16Z

3

$("#button").click(function () {
  var alt = ($('img#image[alt="Grass"]').length) ? 'Spring' : 'Grass';
  $('img#image').attr({ src: "/Content/images/"+alt+".jpg", alt:alt });
});

<a href="/Content/images/Grass.jpg">
  <img src="/Content/images/Grass.jpg" alt="Grass" id="image"/>
</a>
<input type="button" id="button" name="button"/>

edited Jan 30, 2011 at 2:04

answered Jan 30, 2011 at 1:53

sod

3,9886 gold badges25 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Reg Over a year ago

Should be "img#image", not image#img, why in that case is better to check alt?

Reg Over a year ago

but if i am wouldn't set alt. If alt is constant? I need to check src anyway.

PetersenDidIt Over a year ago

there is no need to add the img before the #image selector. #image is highly optimized because its an id, and you should never duplicate id's so there will never be a #image that isn't a img

Jason LeBrun · Accepted Answer · 2011-01-30 01:44:45Z

2

The line if ($("img[id=image][src:contains(Grass)]")) will always be true. The $() function returns a jQuery object, and an object always evaluate to true. You need to check that the length of the result is not 0.

if ($("img[id=image][src:contains(Grass)]").length > 0)

answered Jan 30, 2011 at 1:44

Jason LeBrun

13.3k3 gold badges48 silver badges42 bronze badges

5 Comments

Jason LeBrun Over a year ago

Incidentally, this code isn't a very good way to do things, and I would advise against using it in a production site. But if you're just experimenting with how jQuery works, then this answer will give you what you need.

Reg Over a year ago

Not working, i watch in debug, in both cases($("img[id=image][src:contains(Grass)]").length and $("img[id=image][src:contains(Spring)]").length ) at the same time i am getting length equal to 1

Reg Over a year ago

@Jason LeBrun I am just experimenting, but what is the better way of doing this?

Jason LeBrun Over a year ago

It depends on your ultimate goal, but when I want to toggle between two images like this, I generally include them both in the source, with a unique id attribute set. Set visibility: none CSS property on the one I don't want shown. Then, to toggle between them, just change the visibility property for each one when the button is pressed. It's much more efficient to look something up by DOM ID then by attribute values.

PetersenDidIt Over a year ago

[src:contains(Grass)] is an invalid selector. :contains searches the content of the element not of attributes. api.jquery.com/contains-selector

PetersenDidIt · Accepted Answer · 2011-01-30 01:58:58Z

2

Try this:

var img = $("#image"),
    a = img.parent('a');
$("#button").click(function () {
    var str = (img.attr('src').search('Grass') != -1) ? "Spring" : "Grass",
        src =  "/Content/images/"+str+".jpg";
    img.attr({ src: src, alt: str });
    a.attr("href", src);
});

First we are caching the #image jQuery object, no need to select it each time the button is pressed. Then we do a normal javascript search on the src string. If it has grass in it then we change it to spring. Because we cached the #image jQuery object we don't have to reselect it to change the src and alt attributes. Also if you are changing the img src I am guessing you probably want to update the link around it.

edited Jan 30, 2011 at 1:58

answered Jan 30, 2011 at 1:52

PetersenDidIt

25.6k3 gold badges69 silver badges72 bronze badges

2 Comments

Reg Over a year ago

Does it meant that in that case selector $("img[id=image][src:contains(Grass)]") working not as expected?

PetersenDidIt Over a year ago

@Reg yes :contains is a special selector that doesn't work on attributes. api.jquery.com/contains-selector

Ken Redler · Accepted Answer · 2011-01-30 02:52:02Z

0

One simple fix is to replace this:

$("img[id=image][src:contains(Grass)]")

...with this:

$("#image[src*=Grass]").length

Related selectors:

a^=b    a starts with b
a$=b    a ends with b
a!=b    a does not equal b
a*=b    a contains b

answered Jan 30, 2011 at 2:52

Ken Redler

23.9k8 gold badges60 silver badges69 bronze badges

1 Comment

Reg Over a year ago

I am already fix this using [attribute*=value] instead of [attribute:contains(value)] but still researching why they are returning different results. [attribute*=value] vs [attribute:contains(value)]

Reg · Accepted Answer · 2011-01-30 02:56:43Z

0

          $("#button").click(function () {                
            var value = ($("img#image[src*='Grass']").length) ? 'Spring' : 'Grass';

            $("img").attr({ src: "/Content/images/" + value + ".jpg", alt: value });
          });

answered Jan 30, 2011 at 2:56

Reg

5273 gold badges7 silver badges16 bronze badges

Collectives™ on Stack Overflow

jQuery button click change image

5 Answers 5

3 Comments

5 Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

5 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related