Question

我有一个搜索栏和一个带有文字和图标的提交按钮。因此，当我点击另一个按钮时，我想将其替换为另一个文本并在右侧保持相同的图标。但是当我尝试时，图标首先出现并弄乱文本。如何保持相同的顺序和模式？

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

我的功能代码替换了文本。

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

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

Answer 1

Glyphicons并不意味着作为类直接添加到按钮，而是添加为内联标记，例如i或span。

我改变了你的小提琴，用HTML标签插入带有图标标签的文本。见这里：https://jsfiddle.net/mL2btnws/5/

Answer 2

您可以将button文本包装在单独的span中，以便在不影响其余button的情况下更新其值。

我更新了小提琴：https://jsfiddle.net/twernt/mL2btnws/12/

以下是修改过的HTML：

<button id="submit" class="btn btn-success" type="submit">
  <span class="label">Search!</span>
  <span class="glyphicon glyphicon-search"></span>
</button>

以下是经过修改的JavaScript：

$('#button').click(function(e) {
  $("#submit .label").text("New Search");
});

Answer 3

                <button
                  className=" delete-button glyphicon glyphicon-trash"
                  onClick=() =>

                />

并在你的css文件中

.delete-button {
  padding: 0;
  border: none;
  background: none;
}

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

3 个答案: