CODEWITHSUNDEEP
jquery
Reg
Reg

Reputation: 527

jQuery button click change image

$("#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?

Upvotes: 1

Views: 10370

Answers (5)

Reg
Reg

Reputation: 527

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

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

Upvotes: 0

Ken Redler
Ken Redler

Reputation: 23943

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

Upvotes: 0

sod
sod

Reputation: 3928

$("#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"/>

Upvotes: 3

PetersenDidIt
PetersenDidIt

Reputation: 25620

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.

Upvotes: 2

Jason LeBrun
Jason LeBrun

Reputation: 13293

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)

Upvotes: 2

Related Questions