to image click I gave a function, on clicking it am getting image id, using this I have to change the image using javascript

Question

I gave a function, on clicking it am getting image id, using this I have to change the image using javascript.

The code is as follows

$('img').live('click', function () {
     alert(this.id);
 });

the outputs are as follows like_0,like_1...... and unlike_0,unlike_1.........

But depending on the output I have to change image

$("#like_").click(function () {
    $("#tipid").val(1);
    $("#like_").attr("src", "images/ic_like_select.png");
    $("#unlike_").attr("src", "images/ic_unlike_unselect.png");
});
$("#unlike_").click(function () {
    $("#tipid").val(0);
    $("#like_").attr("src", "images/ic_like_unselect.png");
    $("#unlike_").attr("src", "images/ic_unlike_select.png");
});

My problem is I was not known how to change. Can someone help me thanks.

FYI, don't use `live` it is deprecated method. Use `on` instead. — VisioN, Dec 27 '13 at 09:45
@VisioN you should ask which version of jQuery he is using first. And then suggest. Because he have output of alert it means it works for him. :) — Khamidulla, Dec 27 '13 at 09:48
You can add data attributes to your elements to detect their current state. based on the value of the data attribute you could then select the image you want on the element (or do something similar using classes) — Enermis, Dec 27 '13 at 09:49
@VisioN sometimes you cannot simply upgrade if you are using some old project code. Which can cause a lot of refracting. — Khamidulla, Dec 27 '13 at 09:50
@antindexer jQuery 1.7 which supports `on` was released in November 2011 (more than 2 years ago). A lot of methods have been refactored and accelerated. *"Working"* is not always the matter: `live` was deprecated, since it is much less effective than `on` having event delegation from the closest static parent element. — VisioN, Dec 27 '13 at 09:56
@VisioN why you are explaining all about this to me? You are smart. Do you? If you are smart person your actions should be also smart. Not just give simple answers like OP is .... In first place try to understand others. And show your smartness and respect. — Khamidulla, Dec 27 '13 at 10:02
Check my answer. Hope it may help you get your requirement served. — Rajesh Paul, Dec 27 '13 at 10:45

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

you could take a look at the toggle function from jquery

x.toggle(function(){}, function(){})

something similar has been done here!

edited May 23 '17 at 11:43

Community

1
1

answered Dec 27 '13 at 09:53

Enermis

679
1
5
16

score 0 · Answer 2 · answered Dec 27 '13 at 09:55

0

If I understand well, you want to change your image, and you have to change it depending on the id.

I'll explain what I'd try in your place:

Let's supose this is the picture I want to change:

<img id='like_0' src='/path/to/image' />

So, once you have the id of this image (like_0) you could try this in your javascript function:

document.getElementById("like_0").src="../path/new_img.png";

This last instruction changes the path of the image to the new one

answered Dec 27 '13 at 09:55

AlvaroAV

10,335
12
60
91

but in the similar way i have to change for others also that is like_0,like_1,like_2....... – user3132041 Dec 27 '13 at 10:03

score -1 · Answer 3 · answered Dec 27 '13 at 10:44

fiddle demo

like_img="like_url";
unlike_img="unlike_url";

toggle=function(){
    if($(this).attr("id").match(/^like_/)!=null)
    {
        if($("#tipid").val()==0)
        {
            $("#tipid").val(1);
            $("[id^=like_]").attr('src', unlike_img);
            $("[id^=unlike_]").attr('src', like_img);
        }
        else
        {
            $("#tipid").val(0);
            $("[id^=like_]").attr('src', like_img);
            $("[id^=unlike_]").attr('src', unlike_img);        
        }
    }
    if($(this).attr("id").match(/^unlike_/)!=null)
    {
        if($("#tipid").val()==1)
        {
            $("#tipid").val(0);
            $("[id^=unlike_]").attr('src', like_img);
            $("[id^=like_]").attr('src', unlike_img);
        }
        else
        {
            $("#tipid").val(1);
            $("[id^=unlike_]").attr('src', unlike_img);
            $("[id^=like_]").attr('src', like_img);        
        }
    }
}

$('img').on('click', toggle);

Your question seemed not clear enough. Still I think the demo may help you.

Downvote, What's the reason? please let me improve my answer. — Rajesh Paul, Dec 27 '13 at 14:27

to image click I gave a function, on clicking it am getting image id, using this I have to change the image using javascript

3 Answers3