第一个（文本节点替换）解决方案的说明

Question

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

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

然而这不起作用，按钮只将文本更改为发送但字体真棒图标不会改变，即使我将.html方法更改为val或文本不能正常工作，我做错了什么？顺便说一下，因为我有点新编码，我想知道以下内容当我用

声明Jquery脚本时

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

如果我在click函数之前声明变量会发生什么？他们用0？

初始化

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

Answer 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");

关于var，当您在未初始化的情况下声明它们时，它们会获得值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>元素有两个子元素和。

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

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

区别在于没有包裹＆＃34;提交＆＃34;文本。问题是，当发生这种情况时，DOM会创建一个称为＆＃34; Text Node＆＃34;的东西。就好像这在实践中发生了：

<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（＆＃34; span＆＃34;）选择标签一样）。

因为它不是标签，所以“访问＆＃34;它正在掌握元素的内容。通过以下方式发生：

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。

Answer 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/

祝你好运！

Jquery更改按钮的文本和图标

2 个答案:

替代解决方案：

第一个（文本节点替换）解决方案的说明