Jquery更改按钮的文本和图标

Question

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

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

但是这不起作用，按钮仅将文本更改为发送，但 Font Awesome 图标没有更改，即使我将 .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/

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 s，当您在没有初始化的情况下声明它们时，它们将获得值 undefined .

<小时/>

替代解决方案:

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

<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>元素有两个子元素 <i>和<span> .

现在让我们看一下原始 HTML:

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

区别在于没有 <span>包裹“提交”文本。问题是，当这种情况发生时，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") 选择 <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 .