如果我添加很棒的字体,功能更改文本将不起作用

Function change text does not work if I add font awesome

这是我的函数,它从我的按钮中获取 id 并更改文本:

var modal_button_update = document.getElementById("modal_button_text");
if (modal_button_update.innerHTML === "Add") { modal_button_update.innerHTML = "Update"; } 

这个按钮工作正常(添加变成更新)

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text">Add</button>

但出于某种原因,如果我尝试添加一个很棒的字体图标,它就不再改变了:

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button>

可能是什么原因?

我运行你的代码。问题似乎是您正在检查 modal_button_update 按钮的内部 HTML 是否等于添加。原始按钮:

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text">Add</button>

有效,因为您的 modal_button_update 的内部 HTML 正好是 'Add',但您修改后的 modal_button_update: <button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button> 无效,因为内部 HTML 是 <i class="fas fa-save" aria-hidden="true"></i>&gt;Add 不等于 (===) 'Add'.

以下是我选择的三种不同方法来解决这个问题:

  1. 删除 <i class="fas fa-save" aria-hidden="true"> 元素并将超棒的字体图标放在按钮 class 内,例如:<button type="button" class="btn btn-primary save_button add_group fas fa-save" id="modal_button_text">Add</button> `
  2. 改变你的 Javascript 看起来像:var modal_button_update = document.getElementById("modal_button_text"); if (modal_button_update.innerHTML.includes("Add")) { modal_button_update.innerHTML = "Update"; } 这里按钮检查是否 innerHTML 包含 'Add'.
  3. 保持超棒的字体图标: 在上面的两个解决方案中,当成功将内部 HTML 更改为 'Update' 时,您的 Javascript 代码将去除字体超棒 class 的按钮元素。它是,imo,更容易使用 jQuery 来改变按钮的值来解决这个问题,如:

---HTML---

                    <button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i>Add</button>

---Javascript--

if ($('#modal_button_text').html().includes("Add")) {
    $('#modal_button_text').html("Update");
}

如果您的意图是无论文本的状态如何(即添加或更新)都保留图标,我会亲自将“添加”一词括在一个跨度中,如下所示:

HTML:

<button type="button" class="btn btn-primary save_button add_group" id="modal_button_text"><i class="fas fa-save" aria-hidden="true"></i><span id="modal_button_span">Add</span></button>

那么就看你用不用jQuery了,以下哪一个适合你。

JavaScript:

根据当前文本更改值:

if(document.getElementById("modal_button_span").innerHTML === "Add")  document.getElementById("modal_button_span").innerHTML = "Update";

根据当前文本单击按钮时的切换值:

document.getElementById("modal_button_span").innerHTML = document.getElementById("modal_button_span").innerHTML === "Add" ? "Update" : "Add";

jQuery:

根据当前文本更改值:

if($("#modal_button_span").html() === "Add") $("#modal_button_span").html("Update");

根据当前文本单击按钮时的切换值:

$("#modal_button_span").html($("#modal_button_span").html() === "Add" ? "Update" : "Add");

通过将“添加”一词括在一个跨度中,您可以自由地对文本执行任何需要的操作,而不会影响按钮的其余部分或保存图标。