Question

我有一个使用bootstrap的按钮组，目前All：

旁边显示一个插入符号

<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());
});

然后删除插入符号。有人可以解释如何做到这一点，但保留文本旁边的插入符号吗？

Answer 1

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

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

或者，去除插入符号的span并生成一个伪元素:after来代替样式。

Answer 2

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

^将它添加到JS的末尾。

如何在按钮文本中包含HTML

2 个答案: