javascript - Jquery 替换文本而不删除列表

Question

jQuery(document).ready(function($){
  $("#firstshow .dropdown-menu li a").click(function(){		
        $('#firstshow button b').html(this);
    });

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="firstshow">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><b>36</b>
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">12</a>
      </li>
      <li><a href="#">24</a>
      </li>
      <li><a href="#">36</a>
      </li>
    </ul>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

主要思想是让这段代码像经典的 html select 一样。

我这样做的原因是因为我不知道如何更改选项菜单中的蓝色悬停。

运行代码片段并单击 li 内容。正如您下次看到的内容正在从我的列表中删除，这是我的问题。如何在我的列表中保留 li 数据而不删除？

Answer 1

你内心深处的声明应该是:

$('#firstshow button b').text($(this).text());

您使用 a 元素对象作为按钮文本的 HTML 代码的方式，但您不想分配元素，而是分配其文本。所以:

• 赋值$(this).text()
• 使用 text() 而非 html() 分配它——更好的做法。