班级检测和警报

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>

Answer 2

当我点击sub-level3时它有一个propogation类型问题它也解雇了sub-level4但是我无法使用我提到的方法，现在用以下代码修复，谢谢所有！

 $("li.sub-level3").click(function (e) {

                alert("sub3");
            });

            $(document).on('click', 'li.sub-level4', function (e) {

                alert("sub4");

            });