Question

我在jquyer中尝试使用切换功能，但它不适用于多个LI，我尝试使用可选功能无效。

需要在jquery中创建唯一的图像可选功能。我点击图像里面有很多里面的图像，李会得到背景颜色。假设我点击应该获得背景的其他li图像，其他应该是默认颜色，如开关选择（单选按钮）。

<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

请参阅此http://www.jsfiddle.net/nTaPU/

以下代码将仅在选定的li上添加类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();

显然你可以随时检查是否使用.length函数选择了li，如下所示

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

<强>编辑：

如果要取消选择所选的li，则可以使用切换功能执行此操作。使用以下代码替换上面列出的li click事件代码。

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

你可以通过使用jQuery selectable插件来实现这一点：

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

需要在jquery中创建独特的图像可选功能

2 个答案: