jQuery: Apply css to image on click event

Question

I want basically the same as http://stackoverflow.com/questions/530701/jquery-select-image

a row of images that you can select one of.

But I'm trying to style the one I select, and store it.

var selectedicon = "";

function selecticon(){

$('#iconselect').children().click(function(){
        $(".selectedicon").removeclass("selectedicon");
        selectedicon = $(this).attr("src");
        $(this).addclass("selectedicon");
    });
}

on this

  <div id="iconselect">
    <img src="/red-dot.png" class="selectedicon" />
    <img src="/green-dot.png" />
    <img src="/blue-dot.png" />
    <img src="/orange-dot.png" />
</div>

What am I doing wrong?

Answer 1

As you are not saying what does not work, here is a wild guess:

Probably the function selection() is never called and thus the click handler is never attached to the elements. Put your code into the document.ready callback instead:

var selectedicon = "";

$(function() {
    // I would use $('#iconselect img').click(...)
    $('#iconselect').children().click(function(){
        $(".selectedicon").removeClass("selectedicon");
        selectedicon = $(this).attr("src");
        $(this).addClass("selectedicon");
    });
});

This ensures that your code is executed once the DOM is loaded.

You also have some typos in the method names:

• removeclass() must be removeClass()
• addclass() must be addClass()

Answer 2

jQuery addClass and removeClass are mistyped (C should be capital).

Is the function selecticon called at all?