Question

我想制作元素列表，您只能选择一个选项并取消选择此选项并查看原始元素列表。我希望能够在不取消选择当前选定选项的情况下选择其他元素。我希望这一切都有道理。

HTML

<ul id="mylist">
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    <li>Element 4</li>
    <li>Element 5</li>
    <li>Element 6</li>
</ul>

的jQuery

$('#mylist').on('click', 'li', function () {
    $('#mylist li').removeClass('selected');
    $('#mylist li').addClass('not-selected');
    $(this).removeClass('not-selected');
    $(this).addClass('selected');
    $(this).click(function () {
        $('#mylist li').removeClass('selected');
        $('#mylist li').removeClass('not-selected');
    });
});

CSS

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul li {
    float: left;
    display inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 0 10px 10px 0px;
}

ul li.selected {
    background-color: #f535d7;
}

ul li.not-selected {
    background-color: #bbb;
    opacity: .2;
}

这是我得到了多远：http://jsfiddle.net/vaidasb/rMRgF/5/

Answer 1

将您的javascript更改为：

$('#mylist').on('click', 'li', function () {
    if ($(this).hasClass('selected'))
    {
        $(this).removeClass('selected');
        $('#mylist li').removeClass('not-selected');        
    }
    else
    {
        $('#mylist li').removeClass('selected').addClass('not-selected');
        $(this).removeClass('not-selected').addClass('selected');
    }
});

Answer 2

与jQuery一样，你可以在一行中完成它。

$('#mylist').on('click', 'li', function () {
    $(this).toggleClass('selected').siblings().removeClass('selected');
});

我建议不要使用不同的not-selected CSS类。 “未选中”是默认值。

这使得JavaScript和CSS代码更简单并且避免了“三态”情况，其中第三个状态是既不是selected也不是not-selected的元素。

如果您不希望切换“已选择”状态，请使用.addClass()代替.toggleClass()。

http://jsfiddle.net/Aa2NW/

Answer 3

关闭@Tim我认为就多选而言，这就是你想要的：http://jsfiddle.net/Dcwc5/

像这样更改你的javascript：

$('#mylist').on('click', 'li', function () {

   if ($(this).hasClass('selected'))
    {
        //clicked element was previously selected
        //remove his selected status
        $(this).removeClass('selected').addClass('not-selected');
        //check if other's are selected
        if($('#mylist li.selected').length == 0){
            $('#mylist li').removeClass('not-selected');  
        }
    }
    else if ($(this).hasClass('not-selected')){
        $(this).removeClass('not-selected').addClass('selected');
    }
    else
    {
        //elementw as newly selected
        //all li's remove selected, add not-selected
        $('#mylist li').removeClass('selected').addClass('not-selected');

        //remove not-selected from current element and add selected
        $(this).removeClass('not-selected').addClass('selected');
    }
});

单个选项选择/取消选择列表

3 个答案: