动态更改文本，如何不删除

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标签放置在按钮内部，并设置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');