Question

I would like to present images to my users, where they can select them. I need them to select a limited number, say 5, so:
The images are shown in a matrix, and the user can click them.
I thought:

function boom()
{

this.css('background-color','#fff');
this.data('clicked','yes'); 

// I should also make checks here to see how many were clicked already

}

$('img').click(boom); 

// I thought this would connect all img’s that were clicked upon to this function, where I can call the ‘this’ with the css function…

But it doesn’t work as I thought it would…

Any help would do, thanks !

Answer 1

$(function(){
    var clicked_img = 0;
    $('img').click(function(){
        $(this).css('background-color','#fff').data('clicked','yes');
        clicked_img++;
    });
});

EDIT: UPDATED CODE BELOW FOR NEW REQUEST, FOUND IN COMMENT THREAD:

Per your updated code request, if your HTML is this:

<img id="one" class="clicked" src="img/one.png" /> 
<img id="two" class="clicked" src="img/two.png" />

This JQuery has been fixed to work for you:

$('img.clicked').click(function(){
   boom(this);
});

function boom(e) {    
    if($(e).data('clicked')=='yes') {
        $(e).data('clicked','no').css('border','none');
    } 
    else { 
        $(e).data('clicked','yes').css('border','3px solid #cccccc');
    } 
}

Working demo of the new code: http://jsfiddle.net/Vwye8/