如何在按钮文本中包含HTML

How to include HTML in button text

本文关键字：包含 HTML 文本 按钮      更新时间：2023-09-26

我有一个按钮组使用bootstrap，目前有一个插入符号显示旁边的所有:

<div class = "input-group-btn">
     <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" style = "padding-bottom: 11px;">All <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">All </a></li>
        <li><a href="#">Only Played </a></li>
        <li><a href="#">Include Free </a></li>
        <li><a href="#">Include Free and Only Played </a></li>
    </ul>
</div>

但是，当用户单击其中一个选项时，我希望按钮改变它的值，所以我使用以下JQuery:

$(".dropdown-menu li a").click(function(){
    $(".btn:first-child").text($(this).text());
    $(".btn:first-child").val($(this).text());
});

但是插入符号随后被删除。有人能解释一下如何做到这一点，但保持插入符号旁边的文本?

使用html()代替text()，并在替换所有内容时包含span元素的代码。

或者，将文本换行到另一个span元素中，选择$(".btn:first-child span:first-child")并替换span的文本。

或者，去掉插入符号的span，用:after生成一个伪元素来代替。

$(".btn:first-child").append($("<span class='carat'/>"))

^将其添加到JS的末尾。

相关文章：