如何在纯JavaScript中切换字体真棒图标

Question

下面是我的html和js代码，用于启用和禁用按钮单击时的文本框。 它运行良好，但是现在我需要保留一些字体精美的图标，以进行编辑或保存。

的HTML

<form name="qtyEdit">
    <input type ="text" id ="textBox1" value="7" readonly>
    <input type="button" id="qtyBtnEdit" onClick="enableDisable()" value="Edit">
</form>

JS

function enableDisable() {
    var form = document.qtyEdit;
    if(form.qtyBtnEdit.value=="Edit"){
        form.textBox1.readOnly = false;
        form.qtyBtnEdit.value="Save"
    }
    else{
        form.textBox1.readOnly = true;
        form.qtyBtnEdit.value="Edit"
    }
}

提前致谢

Answer 1

尝试classList.toggle函数：

 function enableDisable() { var form = document.qtyEdit; var icon = document.getElementById("icon"); if(form.qtyBtnEdit.value=="Edit"){ form.textBox1.readOnly = false; form.qtyBtnEdit.value="Save"; icon.classList.toggle('fa-pencil'); icon.classList.toggle('fa-floppy-o'); } else{ form.textBox1.readOnly = true; form.qtyBtnEdit.value="Edit"; icon.classList.toggle('fa-floppy-o'); icon.classList.toggle('fa-pencil'); } } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"> <form name="qtyEdit"> <input type ="text" id ="textBox1" value="7" readonly> <input type="button" id="qtyBtnEdit" onClick="enableDisable()" value="Edit"> <i id="icon" class="fa fa-pencil"></i> </form> 

Answer 2

将输入作为按钮，以便您可以在其中添加内容：

<input type="button" id="qtyBtnEdit" onClick="enableDisable()" value="Edit">

变成

<button type="button" id="qtyBtnEdit" onClick="enableDisable()">Edit</button>

添加fa图标：

<button type="button" id="qtyBtnEdit" onClick="enableDisable()"><i class='fa fa-fw fa-pencil'></i>Edit</button>

在编辑/保存之间切换（我已经使用了jquery，因为这个问题被标记为jquery）：

function enableDisable() {
    if ($("#qtyBtnEdit i").hasClass("fa-pencil")) {
        // Is edit, so change
        $("#qtyBtnEdit").text("Save");
    }
    else {
        // Back to edit
        $("#qtyBtnEdit").text("Edit");
    }
    $("#qtyBtnEdit i").toggleClass("fa-pencil fa-floppy-io")
}

---

如果只需要一个图标而不需要任何文本，请从按钮和代码中删除文本：

<button type="button" id="qtyBtnEdit" onClick="enableDisable()"><i class='fa fa-fw fa-pencil'></i></button>

和

function enableDisable() {
    $("#qtyBtnEdit i").toggleClass("fa-pencil fa-floppy-io")
}