Besoin de créer une fonction sélectionnable image unique dans jquery

Question

J'ai essayé avec la fonction de bascule dans jquyer mais son ne fonctionne pas pour plusieurs LI et j'ai essayé avec la fonction sélectionnable ne fonctionne pas.

Besoin de créer une fonction sélectionnable d'image unique dans jquery. J'ai beaucoup li avec l'image à l'intérieur sur le clic sur l'image li obtiendra la couleur de fond. supposons que je clique sur l'autre image de li qui devrait obtenir l'arrière-plan et l'autre devrait être la couleur par défaut c'est comme la sélection de commutateur (bouton radio).

<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

voir ce http://www.jsfiddle.net/nTaPU/

code suivant ajoutera liClass2 de classe sur seulement li sélectionné.

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

règles CSS

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

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

image interne peuvent être récupérés comme ci-dessous.

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

Évidemment, vous pouvez toujours vérifier si un li est sélectionné à l'aide .length fonction comme ci-dessous

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

Modifié:

Si vous voulez désélectionner li sélectionné, vous pouvez le faire avec fonction de bascule. Remplacez le code d'événement li li listé ci-dessus par le code ci-dessous.

$("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

vous pouvez le faire en utilisant le plugin sélectionnable jQuery aussi comme ceci:

<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>