需要在jquery中創建獨特的圖像可選功能

我已經嘗試使用jquyer中的切換功能，但它不適用於多個LI，我嘗試使用可選功能不工作。需要在jquery中創建獨特的圖像可選功能

需要在jquery中創建獨特的圖像可選功能。我有很多李與內部圖像點擊圖像李會得到背景顏色。假設我點擊其他應該得到背景的圖像，其他的應該是默認的顏色，如開關選擇（單選按鈕）。

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

來源

2010-08-30 Elankeeran

請用背抽動（'）僅用於內嵌代碼的元素。對於較長的代碼塊，可使用工具欄或CTRL + K鍵進行格式化。 – TheVillageIdiot 2010-08-30 06:25:33

看到這個http://www.jsfiddle.net/nTaPU/

下面的代碼將只選定李添加類liClass2。

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

CSS規則

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

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

內部圖像可以被取出等的下方。

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

很明顯，你可以隨時查詢任麗是否選擇使用。長度的功能類似下面

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

編輯：

如果您要取消選擇選擇李，那麼你可以做到這一點帶切換功能。將以上列出的li點擊事件代碼替換爲下面的代碼。

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

來源

2010-08-30 06:36:14

非常感謝你非常有用的信息 – Elankeeran 2010-08-30 06:50:03

沒問題，你也可以使用切換功能使其無法選擇http://www.jsfiddle.net/nTaPU/2/ – 2010-08-30 07:14:19

很酷。謝謝 – Elankeeran 2010-08-30 08:43:08

您可以通過使用jQuery插件選擇也這樣做：

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

來源

2010-08-30 07:23:31 TheVillageIdiot

+1好的建議 – 2010-08-30 07:29:38

需要在jquery中創建獨特的圖像可選功能

回答

相關問題