Question

此代码将使用下拉列表中的所选图标替换<button></button>内显示的内容。这样做效果很好，唯一的问题是点击所选元素后，该元素内的图标会因某种原因消失吗？为什么会这样？我希望<li>保持不变 http://codepen.io/filaret/pen/PGJEAL

HTML：

<div class="input-group-btn">

    <button type="button" class="btn" data-toggle="dropdown">
        <i class="fa fa-book"></i>
    </button>

    <ul class="dropdown-menu">
        <li><i class="fa fa-book"></i> Something 111</li>
        <li><i class="fa fa-newspaper-o"></i> Something 2222</li>
    </ul>

</div>

jQuery的：

var $selectWrapper = $('.input-group-btn');
$selectWrapper.find(".dropdown-menu li").click(function() {

    // Get <i class="fa"></i>
    var $selectedIcon = $(this).find('.fa');
    // Put it inside <button></button>
    $selectWrapper.find(".btn").html($selectedIcon);

});

Answer 1

您需要使用clone()克隆图标，如下所示

var $selectedIcon = $(this).find('.fa').clone();

而不是

var $selectedIcon = $(this).find('.fa');

<强> UPDATED CODEPEN

Answer 2

否则，因为您在下拉列表和按钮标记中进行了标记，并且只更改了课程，为什么不复制课程，在代码中更有效，更快速，更易于理解。< / p>

jQuery(document).ready(function($) {

  "use strict";

  var $selectWrapper = $('.input-group-btn');
  var $buttonIcon = $('.btn i');

  $selectWrapper.find(".dropdown-menu li").click(function() {

    // Get <i class="fa"></i>
    var $selectedIcon = $(this).find('.fa');

    // get icon classes
    var classes = $selectedIcon.attr("class");

    // Put the class in the button i tag
    $buttonIcon.attr('class', classes);

  });

});

请参阅代码笔：http://codepen.io/anon/pen/ORxQPZ

在下拉元素上单击其图标消失

2 个答案: