html - 类别检测和警报

Question

我有一个嵌套列表，其中包含具有指定列表级别的类的列表项。

我想检测点击了哪个级别，但我的代码无法正常工作..有人可以纠正我的错误吗。

$("li").click(function (e) {
    if ($(this).hasClass('sub-level3')){
        alert("this list item contains class-sub-level3");
    } else if ($(this).hasClass('sub-level4')) {
        alert("this list item contains class-sub-level3");
    } else {
        //do nothing
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="has-dropdown sub-level3 not-click moved">
    <a href="http://www.w3schools.com">Visit W3Schools.com!</a>
</li>
<li class="has-dropdown sub-level4 not-click moved">
    <a href="http://www.w3schools.com">Visit W3Schools.com!</a>
</li>

Answer 1

您的代码按预期工作。您要么忘记包含 jQuery，要么重复的消息让您感到困惑。如您所见，它有效:

$("li").click(function (e) {
    if ($(this).hasClass('sub-level3')){
        alert("Level 3");
    } else if ($(this).hasClass('sub-level4')) {
        alert("Level 4");
    } else {
        //do nothing
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
    <li class="has-dropdown sub-level3 not-click moved">
        <a href="http://www.w3schools.com">Visit W3Schools.com!</a>
    </li>
    <li class="has-dropdown sub-level3 not-click moved">
        <a href="http://www.w3schools.com">Visit W3Schools.com!</a>
    </li>
    <ul>
        <li class="has-dropdown sub-level4 not-click moved">
            <a href="http://www.w3schools.com">Visit W3Schools.com!</a>
        </li>
    </ul>
</ul>