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

Question

我的母版页中有一个 jquery 脚本

 $(document).ready(function () { $("button").click(function () { alert(this.id); $('#' + this.id).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>

我正在尝试将跨度类更改为微调器。 单击时，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>