Bootstrap 访问下拉菜单项元素（名称、href、文本）

Question

我有一个按如下顺序嵌套的下拉菜单：

    <div class="navbar-collapse collapse" id="collapsingNavbar">
      <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sensors</a>
        <div class="dropdown-menu bg-dark" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#1">Sensor 1</a>
          <a class="dropdown-item" href="#2">Sensor 2</a>
          <a class="dropdown-item" href="#3">Sensor 3</a>
          <a class="dropdown-item" href="#4">Sensor 4</a>
          <a class="dropdown-item" href="#5">Sensor 5</a>
        </div>
    </div>

<p id="sensor_cur" class="small">Sensor 000</p>

我尝试访问这样的元素：

$('a.dropdown-item').on('click', function(e){
 e.preventDefault();
 var href = $('a.dropdown-item').attr('href');
 var element=document.getElementById("sensor_cur"); 
 element.innerHTML = href;
});

问题是无论我点击哪个菜单项，我总是从 href 值中得到 #1。

谢谢！

Answer 1

问题是因为您选择了事件处理程序中的所有 .dropdown-item 元素。要访问被单击对象的 href，请改用 this 关键字。

另请注意，您可以使用 jQuery 更新 #sensor_cur 元素中的文本，从而使代码更加简洁。试试这个：

$('a.dropdown-item').on('click', function(e) {
  e.preventDefault();
  var href = $(this).attr('href');
  $("#sensor_cur").text(href);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-collapse collapse" id="collapsingNavbar">
  <ul class="navbar-nav">
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sensors</a>
      <div class="dropdown-menu bg-dark" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#1">Sensor 1</a>
        <a class="dropdown-item" href="#2">Sensor 2</a>
        <a class="dropdown-item" href="#3">Sensor 3</a>
        <a class="dropdown-item" href="#4">Sensor 4</a>
        <a class="dropdown-item" href="#5">Sensor 5</a>
      </div>
    </li>
  </ul>
</div>

<p id="sensor_cur" class="small">Sensor 000</p>

Bootstrap 访问下拉菜单项元素（名称、href、文本）

Bootstrap access dropdown menuitem elements (name, href, text)

jquery

drop-down-menu

bootstrap-4