Question

使用twitter-bootstrap，我打算选择其中一个城市，并根据选择更改页面上的一些内容，但是当我运行代码时，我得到的是所有城市，而不是我选择的城市。如何正确识别正确的城市。（Bonus）我如何确保现在突出显示选择并具有glyphicon glyphicon-map-marker

 <ul class="nav nav-pills">
    <li class="dropdown menu-btn">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <span class="glyphicon glyphicon-map-marker"></span> San Francisco<b class="caret"></b></a>
      <ul id="fooHub" class="dropdown-menu">
            <li> <a href="#">San Jose</a> </li>
            <li> <a href="#">Silicon Valley</a> </li>
            <li> <a href="#">New York City</a> </li>
            <li> <a href="#">Paris</a> </li>
            <li> <a href="#">Silicon Valley</a> </li>
            <li> <a href="#">Tokyo</a> </li>
      </ul>
    </li>
    </ul>

这是js代码

 $('#startupHub ').click(function () {
  console.log( $(this).text());
      });

这就是我在控制台上得到的内容。

             San Jose 
             Silicon Valley 
             New York City 
             Paris 
             Silicon Valley 
             Tokyo

而不仅仅是“巴黎我所选择的城市。”

Answer 1

当您选择#startupHub时，该函数会输出此元素中包含的文本，在本例中为所有li元素。

相反，选择锚元素，并输出每个文本：

$('ul.dropdown-menu > li > a').click(function() {
  //alert($(this).text());
  var that = $(this);
  $('.dropdown-menu li a').removeAttr('style');
  that.css({'background-color':'yellow'});
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-pills">
    <li class="dropdown menu-btn">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <span class="glyphicon glyphicon-map-marker"></span> San Francisco<b class="caret"></b></a>
      <ul id="fooHub" class="dropdown-menu">
            <li> <a href="#">San Jose</a> </li>
            <li> <a href="#">Silicon Valley</a> </li>
            <li> <a href="#">New York City</a> </li>
            <li> <a href="#">Paris</a> </li>
            <li> <a href="#">Silicon Valley</a> </li>
            <li> <a href="#">Tokyo</a> </li>
      </ul>
    </li>
    </ul>

Answer 2

查看此演示

http://jsfiddle.net/4Lp16q5e/1/

$('#startupHub li').on('click', function(){
    console.log($(this).text());
});

无法在下拉按钮菜单中正确识别选择

2 个答案: