從下拉列表中選擇選項時，JS無法按預期工作

Question

目標

1. 單擊<ul>的成員以選擇/取消選擇它。

2. 如果選擇class = allSearch，則取消選擇任何其他已選擇的li。

3. 如果選擇了allSearch，然后選擇了notAllSearch，則取消選擇allSearch。

問題

目標3無法正常工作，對我來說這沒有意義，因為它應該（並且基本上）與目標2中使用的代碼相同。

這是代碼：

的HTML

<ul class="menu vertical" id="searchMenu">
    <li id="allSearch" class="allSearch selected">All</li>
    <li id="notAllSearch" class="notAllSearch">User</li>
    <li id="notAllSearch" class="notAllSearch">Artists</li>
    <li id="notAllSearch" class="notAllSearch">Events</li>
</ul>

JS：

$(document).ready(function() {
$('#searchMenu li').click(function () {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
        }
    else if ($(this).hasClass('notAllSearch')) {
        $('#allSearch').removeClass('selected')
        $(this).addClass('selected');
    }
    else if ($(this).hasClass('allSearch')) {
        $('#notAllSearch').removeClass('selected')
        $(this).addClass('selected');
    }
    else
        $(this).addClass('selected');
});
})

Answer 1

試試這個：代替ID在CLASS上工作

$(document).ready(function() {
$('#searchMenu li').click(function () {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
    }
    else if ($(this).hasClass('notAllSearch')) {
        $('.allSearch').removeClass('selected')
        $(this).addClass('selected');
    }
    else if ($(this).hasClass('allSearch')) {
        $('.notAllSearch').removeClass('selected')
        $(this).addClass('selected');
        }
    else
        $(this).addClass('selected');
    });
});

這是要測試的筆