javascript - 在 Bootstrap 中更新按钮图标

Question

我有一个使用 Bootstrap 3 的应用程序。在该应用程序中，我有一个与屏幕右侧对齐的菜单。该菜单可以在这个 fiddle 中看到.菜单的代码如下所示:

<div class="dropdown pull-right">
  <a id="myDrop" href="#" class="btn btn-default  dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
    <i class="glyphicon glyphicon-home"></i>
    <span class="caret"></span>
  </a>

  <ul id="myMenu" class="dropdown-menu" role="menu" aria-labelledby="myDrop">
    <li role="presentation" class="active">
      <a role="menuitem" tabindex="-1" href="#" data-target="#home">
        <i class="glyphicon glyphicon-home"></i>
        Home
      </a>
    </li>

    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" data-target="#profile">
        <i class="glyphicon glyphicon-user"></i>
        Profile
      </a>
    </li>

    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" data-target="#messages">
        <i class="glyphicon glyphicon-inbox"></i> 
        Messages
      </a>
    </li>

    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#" data-target="#settings">
        <i class="glyphicon glyphicon-cog"></i>
        Settings
      </a>
    </li>
  </ul>
</div>

每个图标旁边的文本不是垂直居中的。但我真正的问题是，当用户选择菜单项时，我想更新 myDrop 中显示的图标。 myDrop 中的图标应更改为所选菜单项的图标。我能够使用以下方法获取文本:

$('#myMenu li a').on('click', function () {
  var $this = $(this);
  var parent = $this.closest('li');
  var target = $this.data('target');
  var btn = $this.closest('.dropdown').find('.btn.dropdown-toggle');
  var str = $this.text() + " <span class='caret'></span>";

  parent.siblings().removeClass('active');
  parent.addClass('active');

  btn.html(str);
  $('#myTab a[href="' + target + '"]').tab('show');  
});

虽然这会选择文本。它不使用图标。我尝试使用 jQuery 的 .find 函数。但是，我一直得到 undefined。我不确定我做错了什么。

Answer 1

你可以改变:

btn.html(str);

到

btn.html($(this).html()).append("<span class='caret'></span>");

http://jsfiddle.net/wnje9zak/3/

或者，如果您只想要图标，您可以这样做:

btn.html('').append($(this).find('i').clone()).append("<span class='caret'></span>");