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

此代码将从下拉列表中用选定图标替换<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); 

});

来源

2016-10-02 Ivan Topić

否则因为你必须在下拉菜单和按钮标签，只有一流的变化我的标签，你为什么不只是复制的类，它的效率更高，在代码中更快，更易于理解。

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

来源

2016-10-02 09:55:27 Gatsbill

您需要克隆使用clone()图标就像下面

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

代替

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

UPDATED CODEPEN

来源

2016-10-02 09:45:35 Azim

你能解释清楚是什么原因导致这个问题？我明白clone（）会对元素进行深层次的复制，但不确定问题出现的原因是什么 – splay

谢谢，这有效......但为什么克隆甚至是必要的？查找元素不会将其删除：/ –

查找元素不会将其删除。但是当你使用'append（）'或'html（）'时，它会从原来的位置移动。 @IvanTopić – Azim

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

回答

相关问题