javascript - 如何更改按钮中的文本而不更改其他标签

标签 javascript jquery html

如何在不更改其他标签的情况下更改按钮中的文本?

我的按钮:

<button id="ItemForSearch" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
All Items
<span class="caret"></span>
</button>

我的下拉菜单:

<ul class="dropdown-menu">
 <li><a id="AllItems" href="#">AllItems</a></li>
<li><a id="Countries" href="#">Countries</a></li>
<li><a id="Ships" href="#">Ships</a></li>
</ul>

我尝试了以下方法,但跨度标签已被删除:

 $('.dropdown-menu li a').click(function () {
 var item = $(this).text();
$('button[id=ItemForSearch]').text(item);
});

我只需要更改文本。但我不知道!!

最佳答案

您只需要替换按钮中的第一个文本节点,这就是这里的问题。当您使用 .text().html() 时,它会替换按钮的全部内容。

尝试

$('.dropdown-menu li a').click(function () {
    $('#ItemForSearch').contents().eq(0).replaceWith($(this).text());
});

演示:Fiddle

关于javascript - 如何更改按钮中的文本而不更改其他标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19872950/

相关文章:

javascript - imagemapster不透明度

javascript - 为什么按钮必须点击两次才能起作用?

javascript - 如果 javascript 在 $(document).ready 函数中,它不允许我选择按钮

html - 为什么我的 <HR> 标签没有覆盖整个页面?

html - inline-div占用太多​​空间

javascript - 如何将表单/输入/文本添加到 fetch() 请求的末尾?

javascript - 将事件注册到新添加的选择器

javascript - jquery 动态可折叠列表不起作用; jsfiddle 示例

javascript - 如何在html中使用mindmup js

jquery - Angular 2 从 Jquery 调用 Typescript 函数导致未捕获的 TypeError