javascript - 获取点击它的导航项的名称

Question

我有一个在 Bootstrap 中设计的 navbar，我想获取它被点击的 nav-item 的名称。我可以将其设置为当前处于事件状态但无法检索导航项的名称。如何做到这一点？

我知道 jQuery 中的 nodeName 获取节点的名称，但显然我想获取该节点内的内容。

HTML

<div class="collapse animated fadeInLeft" id="navbarNav">
    <ul class="navbar-nav">
        <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
        <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
    </ul>
</div>

js

$(document).ready(function () {
    "use strict";
    $('ul.navbar-nav > li').click(function (e) {
        e.preventDefault();
        var getItem = $(this);
        $('ul.navbar-nav > li').removeClass('active');
        $(this).addClass('active');
        $(".navbar-brand").after(" <ul class=\"navbar-nav\"><li class=\"nav-item active\"> <a class=\"nav-link\" href=\"#\">" + getItem + "<span class=\"sr-only\">(current)<\/span><\/a> <\/li><\/ul> ");
        $('.navbar-toggler').click();
    });
});

我的当前输出是 [object][object] 但我想获取 Home(如果它当前处于事件状态)或 Pricing(如果它当前处于事件状态)活跃。

附言:使用 Bootstrap 4

Answer 1

$(this) 是li对象，你想这样使用$(this).text()

   $('ul.navbar-nav > li').click(function (e) {
        e.preventDefault();
        var getItem = $(this).text();
        $('ul.navbar-nav > li').removeClass('active');
        $(this).addClass('active');
        $(".navbar-brand").after(" <ul class=\"navbar-nav\"><li class=\"nav-item active\"> <a class=\"nav-link\" href=\"#\">" + getItem + "<span class=\"sr-only\">(current)<\/span><\/a> <\/li><\/ul> ");
        $('.navbar-toggler').click();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse animated fadeInLeft" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
                <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
                <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
                <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
            </ul>
        </div>

		<div class="navbar-brand"></div>