如何使用jQuery從下拉無序列表中獲取文本值？

Question

這是無序列表：

<ul id="all-categories" class="categories-list nav nav-tabs text-center">
 <li class="category" >
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Liquor</a>
         <ul id="liquor-category" class="dropdown-menu">
            <li><a href="#">Bourbon</a></li>
            <li><a href="#">Gin</a></li>
            <li><a href="#">Rum</a></li>
            <li><a href="#">Tequila</a></li> 
            <li><a href="#">Vodka</a></li> 
            <li><a href="#">Whiskey</a></li>  
          </ul>


  </li>
   ...
</ul

這是我用來獲取文本並將其用作頁面其他位置的標簽的代碼：

var liquor_selected  = document.querySelector('#liquor-category');
      var selected = liquor_selected.addEventListener('click',function(e){
          document.getElementById("category-name-box").innerHTML = "Liquor Sub-Category Here";
      });

它打印通用文本，但我希望它打印子類別。 請一點幫助。

Answer 1

點擊處理程序綁定到父項，因此您必須找到被點擊的e.target：

var liquor_selected = document.querySelector('#liquor-category');
var selected = liquor_selected.addEventListener('click', function (e) {
  document.getElementById("category-name-box").innerHTML = e.target.innerText;
});

在jQuery中，您可以執行以下操作：

$('#liquor-category').on('click', function (e) {
  $('#category-name-box').text($(e.target).text());
});

或者您可以在jQuery中更輕松地綁定到選擇器

$('#liquor-category a').on('click', function (e) {
  $('#category-name-box').text($(this).text());
});

Answer 2

我假設您想實現以下目標（在jQuery中）

JsFiddle中的示例： https ://jsfiddle.net/282u8avw/

HTML：

          <ul id="liquor-category" class="dropdown-menu">
            <li><a href="#">Bourbon</a></li>
            <li><a href="#">Gin</a></li>
            <li><a href="#">Rum</a></li>
            <li><a href="#">Tequila</a></li> 
            <li><a href="#">Vodka</a></li> 
            <li><a href="#">Whiskey</a></li>  
          </ul>
          <div id="category-name-box">

          </div>

Javascript / jQuery：

  $(document).ready(function() {
    $('#liquor-category a').click(function() {
      $('#category-name-box').text($(this).text());
    });
  })