jquery - 制作单个选项选择/取消选择列表

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');
    }
});