【问题标题】：Jquery change text and icon of buttonJquery更改按钮的文本和图标
【发布时间】：2021-07-15 20:13:17
【问题描述】：

我试图在发送 ajax 请求之前单击时发送按钮的文本和字体图标，但我可以，我使用方法链接

$("#submit").html("Sending...").addClass("btn-warning");
$("#avion").addClass("fas fa-cog fa-spin");

但是这不起作用，按钮仅将文本更改为发送但字体真棒图标没有改变，即使我将 .html 方法更改为 val 或 text 它不起作用，我做错了什么？顺便说一句，因为我对编码有点陌生，所以我想知道以下内容当我用

声明Jquery脚本时

$(document).ready(function(){
    $("#submit").click(function(){
    var name = $("#name").val();
    var lastName = $("#lastName").val();
    var age = $("#age").val();

如果我在点击函数之前声明变量会发生什么？它们是用 0 初始化的吗？

https://jsfiddle.net/hwocnmzo/1/

【问题讨论】：

标签： jquery ajax bootstrap-4

【解决方案1】：

当您使用.html() 时，您会替换按钮的全部内容。由于图标是此类内容的一部分，因此已消失。

您应该只替换文本节点。使用

$("#submit").addClass("btn-warning")
               .contents().filter(function () {
                       return this.nodeType == Node.TEXT_NODE;
               })[0].nodeValue = "Sending...";
$("#avion").addClass("fas fa-cog fa-spin");

关于vars，当你在没有初始化的情况下声明它们时，它们会得到undefined的值。

替代方案：

您可以将按钮文本包装在 标记中，并调整其文本，而不必选择文本节点。示例：

<button type="button" name="submit" id="submit" class="btn btn-primary">
  <i id="avion" class="fas fa-paper-plane"></i>
  <span>Submit<span>
</button>

$("#submit").addClass("btn-warning").find('span').text("Sending...");
$("#avion").addClass("fas fa-cog fa-spin");

第一种（文本节点替换）方案说明

这里是解释第一种方案，但我们看一下第二种方案的HTML：

<button type="button" name="submit" id="submit" class="btn btn-primary">
  <i id="avion" class="fas fa-paper-plane"></i>
  <span>Submit<span>
</button>

如您所见，<button> 元素有两个 child 元素  和 。

现在让我们看看原始的 HTML：

<button type="button" name="submit" id="submit" class="btn btn-primary">
  <i id="avion" class="fas fa-paper-plane"></i>
  Submit
</button>

不同之处在于没有  包装“提交”文本。问题是，当这种情况发生时，DOM 会创建一个称为“文本节点”的东西。就好像这发生在实践中：

<button type="button" name="submit" id="submit" class="btn btn-primary">
  <i id="avion" class="fas fa-paper-plane"></i>
  <text-node>Submit<text-node>
</button>

但是text-node标签在现实中并不存在。由于它不存在，因此您无法选择它（就像您在替代解决方案中通过`.find("span") 选择 标签一样）。

因为它不是标签，所以“访问”它的方式是获取元素的内容。通过以下方式发生：

var buttonsContents = $("#submit").contents();

然后过滤它，只在集合中保留contents（称为节点）中属于文本类型的部分。

var nodesOfTypeText = $("#submit").contents().filter(function () {
     return this.nodeType == Node.TEXT_NODE;
});

有了这个，并且因为我们知道#submit只有一个文本节点，包含字符串Submit的文本节点，我们访问这样的第一个节点：

var textNodeWithSubmitText = nodesOfTypeText[0];

然后我们改变它的值：

textNodeWithSubmitText.nodeValue = "Sending...";

换句话说，代码：

$("#submit").contents().filter(function () {
                       return this.nodeType == Node.TEXT_NODE;
               })[0].nodeValue = "Sending...";

如果扩大的话：

var buttonsContents = $("#submit").contents();
var nodesOfTypeText = buttonsContents.filter(function () {
     return this.nodeType == Node.TEXT_NODE;
});
var textNodeWithSubmitText = nodesOfTypeText[0];
textNodeWithSubmitText.nodeValue = "Sending...";

就是这样。附带说明，如果您不熟悉.filter() 功能，我推荐its official docs。

【讨论】：

它有效，但你能解释一下吗？我了解替换按钮全部内容的 html 部分，但我对您首先放置 contents().filter(function () { return this.nodeType == 3; })[0].nodeValue = 的代码解决方案感到困惑发送...";然后 contents().filter(function () { return this.nodeType == Node.TEXT_NODE; })[0].nodeValue = "Sending...";有什么区别以及解决方案的工作原理
Node.TEXT_NODE 只是一个值为3 的常量。我替换了它，因为它使代码更具可读性。关于解释，我已经更新了答案，看看吧。
@acdcjunior 在为 Font Awesome 添加新类之前不要忘记.removeClass("fa-paper-plane")。
@Twisty 似乎不需要那个：jsfiddle.net/acdcjunior/hwocnmzo/9
@acdcjunior 同意，只是很好的做法。如果出于任何原因再次渲染，如果有两个类，FontAwesome 可能会感到困惑。

【解决方案2】：

当您使用.html() 时，您正在删除。试试这个：

beforeSend: function() {
  $("#submit").html("<i id='avion' class='fas fa-cog fa-spin'></i> Sending...").addClass("btn-warning");
}

https://jsfiddle.net/Twisty/0rvpxwp4/

祝你好运！

【讨论】：