javascript - 如何使用 glyphicon bootstrap 更改按钮文本并保留顺序?

标签 javascript jquery html css twitter-bootstrap

我有一个搜索栏和一个带有文本和图标的提交按钮。所以,我想用另一个文本替换它,并在单击另一个按钮时在右侧保留相同的图标。但是当我尝试时,图标先出现并弄乱了文本。如何保持相同的顺序和模式?

我做错了什么?欢迎任何帮助。 这里有一些图像来显示正在发生的事情。

Before and after replace

还有我的函数代码来替换文本。

$('#button').click(function(e) {
  $("#submit").text("New Search");
  $("#submit").addClass('glyphicon glyphicon-search');
});

现场演示: https://jsfiddle.net/gheleri/mL2btnws/3/

最佳答案

Glyphicons 并不是作为一个类直接添加到按钮中,而是作为内联标记添加,例如 ispan

我更改了您的 fiddle ,以将带有图标标签的文本作为 HTML 插入。看这里:https://jsfiddle.net/mL2btnws/5/

关于javascript - 如何使用 glyphicon bootstrap 更改按钮文本并保留顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35162550/

相关文章:

java - 从 tr 标签中找到一个复选框并在 Selenium(java) 中选择它

Javascript 命名空间和范围 : need clarification

javascript - 如何使用 jQueryUI 的爆炸效果来爆炸 HTML 元素?

javascript - 为什么我无法将日期与 moment js 进行比较?

javascript - 如何将字符串从 javascript 传递到服务器?然后在asp.net webforms中从服务器获取返回值

javascript - jQuery Validate .addMethod 基于属性的验证

jquery - JSON 对象未定义

javascript - 如何使用 Jasmine 验证 jQuery AJAX 事件?

html - 如何在 flex 元素(单元格)中居中图像

html - 将部分并排对齐