Question

我有这个按钮：

<button disabled="" id="btnGuardarPaso1" class="btn btn-primary" type="submit"><i class="fa fa-save"></i> Save</button>

然后通过jQuery我根据select元素上的用户选择动态更改文本。见代码：

if (tipoTramiteSolVal != 1 && tipoTramiteSolVal !== "" && tipoTramiteSolVal != undefined ) {
    $("#btnGuardarPaso1").removeClass("btn-primary").text("Edit");
} else {
    $("#btnGuardarPaso1").addClass("btn-primary").text("Save");
}

但是，这段代码有一个问题：<i class="fa fa-save"></i>元素也被删除/更改，我想维护它。我怎么解决这个问题？

此外，由于该按钮具有FontAwesome图标，我是否可以动态更改它？例如，fa-save将更改为fa-edit，反之亦然，具体取决于用户的选择

Answer 1

您可以在按钮内放置span标签，并设置跨度而不是按钮的文本。斜体将超出范围。

<button disabled="" id="btnGuardarPaso1" class="btn btn-primary" type="submit"><i class="fa fa-save"><span id="textItem"></span></i> Save</button>


if (tipoTramiteSolVal != 1 && tipoTramiteSolVal !== "" && tipoTramiteSolVal != undefined ) {
$("#btnGuardarPaso1").removeClass("btn-primary");
$("#textItem").text("Edit");
} else {
$("#btnGuardarPaso1").addClass("btn-primary");
$("#textItem").text("Save");
}

[edit]如果你使用jQuery来查找斜体标签（直接通过ID或遍历DOM），你肯定可以使用以下方法设置类：

 $(this).attr('class','classname');

动态更改文本，如何不删除<i>元素？</i>

1 个答案: