Question

下面是我的html和js代码，用于启用和禁用按钮单击时的文本框。它工作得很好，但现在我需要在编辑或保存时保留按钮的fontawesome图标。

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")
}

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

2 个答案: