Question

我的主页上有一个jQuery脚本

(((- 1 -) 10 -) 23 (((- 40 -) 101 -) 124 -))

$(document).ready(function () {
  $("button").click(function () {
    alert(this.id);
    $('#' + this.id).removeClass("fa fa-cog").addClass("fas fa-spinner fa-spin");
  });
});

我正在尝试将span类更改为微调器。单击时，fa-spinner类与fa-cog一起添加，并且按钮本身正在旋转，这不是我想要的。我只希望fa-cog图标更改为fa-spinner图标。

Answer 1

问题是元素ID。您更改按钮类别而不是范围。

$(document).ready(function () {
  $("button").click(function () {
    alert(this.id);
    $('#' + this.id).children('span').removeClass("fa fa-cog").addClass("fas fa-spinner fa-spin");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="col-md-2">
  <button type="button" id="btnGenerateReport" class="btn btn-default btnGenerateReport" aria-label="Left Align" runat="server">
            <span class="fa fa-cog" runat="server" aria-hidden="true"></span>
      </button>
</div>

Answer 2

您要更改按钮上的类，而不是范围。使用.find()

定位范围

  $("button").click(function () {
    $(this).find('span').removeClass("fa-cog").addClass("fa-spinner fa-spin");
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="col-md-2">
  <button type="button" id="btnGenerateReport" class="btn btn-default btnGenerateReport" aria-label="Left Align" runat="server">
            <span class="fa fa-cog" runat="server" aria-hidden="true"></span>
      </button>
</div>

单击后无法更改字体真棒图标

2 个答案: