Question

所以我有一个下拉菜单，它来自下面发布的按钮。我在每个列表选项中都包含了一个字体很棒的图标。我已经使用jquery根据选择更改按钮的文本（和颜色），但我似乎无法弄清楚如何将相关列表项的图标添加到按钮文本，这看起来真的很好用什么我想做。我应该将图标作为数据属性包含吗？

这是我的HMTL：

<div class="btn-group  col-sm-offset-1 col-sm-11">
       <a id="post-type-select-button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-target="#">Select a type of post &nbsp; <span class="caret"></span></a>
             <ul id="post-type-menu" class="dropdown-menu" style="margin-left: 16px;">
                    <li data-color="#FFFFAA" class="alert-li" id="A"><a tabindex="-1" href="#" align="left">Alert<i  class="fa fa-warning pull-right" style="margin-top:3px"></i></a></li>
                    <li data-color="#99D699" class="report-li" id="RP"><a tabindex="-1" href="#" align="left">Report<i  class="fa fa-file-text pull-right" style="margin-top:3px"></i></a></li>
                    <li data-color="#C8ECFF" class="review-li" id="RV"><a tabindex="-1" href="#" align="left">Review<i  class="fa fa-star-half-empty  pull-right" style="margin-top:3px"></i></a></li>
                    <li data-color="#FF9494" class="question-li" id="Q"><a tabindex="-1" href="#" align="left">Question<i  class="fa fa-question  pull-right" style="margin-top:3px"></i></a></li>
            </ul>
      </div>

这是我的jquery：

$("#post-type-menu li").click(function () {
                $("#post-type-select-button:first-child").text($(this).text());
                $("#post-type-select-button").css("background-color",$(this).data("color")); 
                $("#post-type-select-button").css("color","#555555");                    
            });

真诚地感谢您的帮助！

Answer 1

使用$('#post-type-select-button i')选择器，并将其类更改为您想要的任何内容。 E.g。

 $('#post-type-select-button i').attr('class', 'fa fa-info');

使用jquery将图标附加到按钮文本

1 个答案: