从下拉列表中选择选项时，JS 无法按预期工作

Question

目标

点击会员<ul>selects/deselects即可。
如果选择 class=allSearch，则取消选择任何其他已选择的 li。
如果选择了 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');
    });
});

这是pen to test

从下拉列表中选择选项时，JS 无法按预期工作

JS not working as expected when selecting options from dropdown

javascript

jquery

jquery-events