如何使用glyphicon bootstrap更改按鈕文本並保存順序？

我有一個搜索欄和一個帶有文本和圖標的提交按鈕。所以，當我點擊另一個按鈕時，我想將其替換爲另一個文本，並在右側保留相同的圖標。但是當我嘗試時，圖標首先出現並且混亂了文字。我怎樣才能保持相同的順序和模式？如何使用glyphicon bootstrap更改按鈕文本並保存順序？

我做錯了什麼？請任何幫助，歡迎。這裏有一些圖像來顯示發生了什麼。

Before and after replace

而我的函數的代碼替換文本。

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

現場演示：https://jsfiddle.net/gheleri/mL2btnws/3/

來源

2016-02-02 Rodolpho Gheleri

Glyphicons並不意味着直接加入到該按鈕爲一類，但加入作爲嵌入標記如i或span。

我改變了你的小提琴插入爲帶有圖標標籤的HTML文本。在這裏看到：https://jsfiddle.net/mL2btnws/5/

來源

2016-02-02 19:52:04

可以爲了不影響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"); 
});

來源

2016-02-02 20:06:35 twernt

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

       />

，並在你的CSS文件

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

來源

2017-11-06 13:40:57

如何使用glyphicon bootstrap更改按鈕文本並保存順序？

回答

相關問題