Question

I am creating a user registration form, and there is an option to select avatar icon for user and for that I am using following code…

 <ul class="icons clearfix">
     <li><img src="images/123456.jpg" title="123456" alt="123456" width="34" height="34" /></li>
     <li><img src="images/654321.jpg" title="654321" alt="654321" width="34" height="34" /></li>
 </ul>

and following jquery code…

$(document).ready(function(){
    $('ul.icons li').click(function() {
        $(this).removeClass('selected');
        $(this).addClass('selected');
        var selected_img = $('img',this).attr('alt');
        $('.avatar').val(selected_img); 
    });

});

First of all, is my approach correct? And it should remove selected class from li element if user clicks again on any other image and avatar image should be updated accordingly. Thanks.

Answer 1

You should actually use the IMG for the click, not the LI.

 $('ul.icons img').click(function() {
        $('ul.icons img').removeClass('selected'); // -- remove all other SELECTED
        $(this).addClass('selected');
        var selected_img = $(this).attr('alt');
        $('.avatar').val(selected_img); 
    });