在Javascript中更新多个id

Question

我使用<SPAN ID="idName">基于下拉选择ID 更新页面中的少量文本,但只更改了第一个元素ID.使用不同ID的工作,但希望有一个更简单的解决方案.我在下拉菜单中使用twitter-bootstrap-3.

这是HTML:

<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> <span id="SelectName"></span><b     class="caret"></b></a>
  <ul id="myCitylist" 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>

Now we'll talk about <span id="SelectName"></span>

和javascript

 document.getElementById("SelectName").innerHTML = "San Francisco";

 $('#myCitylist li').on('click', function(){
    document.getElementById("SelectName").innerHTML = $(this).text();

 });

 document.getElementById("SelectName").innerHTML = "San Francisco";

这是代码:http://jsfiddle.net/ub1g7fw6/

Answer 1

id只能在页面上使用一次.你可以用一个class代替:

HTML

<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> 
         <span class="update">San Francisco</span><b class="caret"></b>
      </a>
      <ul id="myCitylist" 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>

<div>Now we'll talk about <span class="update">San Francisco</span></div>

JS

$('.dropdown-menu').on('click', "li", function(){
  var optionChosen = $(this).text();
  $(this).closest("ul.nav.nav-pills").find("span.update").text(optionChosen).end().next().find("span.update").text(optionChosen);  
 });

小提琴