2

1 つのオプションのみを選択し、このオプションの選択を解除して、元の要素のリストを表示できる要素のリストを作成したいと考えています。そして、現在選択されているオプションを最初に選択解除せずに、他の要素を選択できるようにしたいと考えています。これがすべて理にかなっていることを願っています。

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/

4

3 に答える 3

2

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');
    }
});
于 2013-10-31T15:22:14.893 に答える
1

多くの jQuery と同様に、1 行で実行できます。

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

個別のnot-selectedCSS クラスを使用しないことをお勧めします。「未選択」がデフォルトです。

selectedこれにより、JavaScript と CSS コードの両方が単純になり、3 番目の状態が要素でもでもない要素である「3 状態」の状況が回避されますnot-selected。

「選択済み」状態を切り替えられるようにしたくない場合は、.addClass()代わりに を使用し.toggleClass()ます。

http://jsfiddle.net/Aa2NW/

于 2013-10-31T15:29:50.753 に答える