jQuery Change picture on link click (matching with the same number in id)

Question

Hi,

I got a generated list of links where every link has an unique id(number) and a class called "load".

I would like to change a picture on the other side of the page with the same number in the id as the link I clicked. Since id on elements are unique, i added folderid[number] infront of all the images

This is what i have so far (not working). I'm not sure if this is even close to correct but it feels like it :)

$(function(){
    $(".load").click(function(){
     var element = $(this);
     var link_id = element.attr("id");
     alert(link_id);
     $("#folderid", link_id).attr("src", "img/folder_open.gif")
    });
});

My pictures and links looks like this in the code:

<img src="img/folder.gif" id="folderid5" class="img_folder" alt="Folder"/>
<a href="#" id="5" class="load img_id5">

Thanks

Answer 1

http://docs.jquery.com/Events/live should do the trick for generated stuff. Also: add a semicolon ( ; ) after attr(..., ...)

$("#folderid", link_id).attr("src", "img/folder_open.gif");

Answer 2

It looks like you mean to select

$('#folderid' + link_id).attr(...)

Answer 3

If you mean your images have their IDs as:

folderid[1],folderid[2], etc

the '[' character is probably posing a problem with jQuery. You can try escaping it and using:

$("img#folderid\\["+link_id+"\\]").attr("src", "img/folder_open.gif");

I haven't had the need to escape characters in jQuery before, because I could simply change my naming convention, but I believe the above should work.

Another way to go would be to remove the brackets from the ID and use:

$("img#folderid"+link_id).attr("src", "img/folder_open.gif");

Answer 4

You are close. You need to concatenate the id onto the selector of the image instead of using a comma. Try this code:

$(function(){
    $(".load").click(function(){
       var element = $(this);
         var link_id = element.attr("id");
        alert(link_id);
        $("#folderid" + link_id).attr("src", "img/folder_open.gif")
    });
});

Answer 5

I think you need a + not a , on this line:

$("#folderid", link_id).attr("src", "img/folder_open.gif")

to

$("#folderid" + link_id).attr("src", "img/folder_open.gif")