Need to create unique image selectable function in jquery.

Question

I have try with toggle function in jquyer but its not working for multiple LI and I tried with the selectable function not working.

Need to create unique image selectable function in jquery. I have many li with inside image on click on image li will get background color. suppose I click on other li image that should get background and other should be default color its like switch selection (radio button).

<ul><li class="ui-widget-content ui-corner-tr ui-draggable">  
        <fb:profile-pic height="32" width="32" linked="false" uid="557103888" 
             style="width: 32px; height: 32px;" class=" fb_profile_pic_rendered">  
            <img class="" style="width: 32px; height: 32px;" title="some name" 
                 alt="some name" src="files/t557103228_5135.jpg">  
        </fb:profile-pic> 
    </li>
    <li class="ui-widget-content ui-corner-tr ui-draggable">  
        <fb:profile-pic height="32" width="32" linked="false" uid="557103887" 
              style="width: 32px; height: 32px;" class=" fb_profile_pic_rendered">  
            <img class="" style="width: 32px; height: 32px;" title="some name" 
                     alt="some name" src="files/t557103228_5135.jpg">  
        </fb:profile-pic> 
    </li>
    <li class="ui-widget-content ui-corner-tr ui-draggable">  
        <fb:profile-pic height="32" width="32" linked="false" uid="557103886" 
              style="width: 32px; height: 32px;" class=" fb_profile_pic_rendered">  
            <img class="" style="width: 32px; height: 32px;" title="some name" 
                     alt="some name" src="files/t557103228_5135.jpg">  
        </fb:profile-pic> 
    </li>
    </ul>

Answer 1

Hi, see this http://www.jsfiddle.net/nTaPU/

Following code will add class liClass2 on selected li ONLY.

$(function(){
    $("ul.class1 li").each(function(i, v){
        $(this).click(function(){                     
            $(this).
                siblings().each(function(){ $(this).removeClass("liClass2");  }).
                end().addClass("liClass2");
        });
    }); 
}); 

css rules

.class1 li{
    background-color:#dddddd;
    color:#000000;
}

.liClass2{
    background-color:#000000 !important;
    color:#ffffff !important;
}

Internal Image can be fetched like below.

$("ul.class1 li.liClass2").html();

Obviously you can always check whether any li is selected using .length function like below

if($("ul.class1 li.liClass2").length > 0)
     //li is selected
else
     //no li is selected yet

Edited:

If you want to unselect selected li then you can do it with toggle function. Replace li click event code listed above with the code below.

$("ul.class1 li").each(function(i, v){
        $(this).toggle(function(){                     
            $(this).
                siblings().each(function(){ $(this).removeClass("liClass2");  }).
                end().addClass("liClass2");
        }, function(){
            $(this).removeClass("liClass2");
        });
 });

Answer 2

you can do this by using jQuery selectable plugin also like this:

<script type="text/javascript">
        $(function(){
            var selectedElement;
            $("#selectable").selectable({
                selecting: function(event,ui){
                    if(selectedElement !== null){
                        $(selectedElement).removeClass("ui-selected");
                    }
                },
                selected: function(event, ui){
                    selectedElement=ui.selected;
                }
            });
        });
    </script>