jquery - 如何更换 fontawesome 5 图标？

Question

我正在开发一个 ASP.NET MVC 项目，其中有一个非常棒的铅笔图标。单击时，我希望允许用户编辑铅笔旁边的字段，并用保存图标替换铅笔。我的包含有 bootstrap 4、jquery 3.2.1 和 fontawesome 5。

我似乎无法让它发挥作用。起初，我尝试彻底替换图标，但是，现在我尝试在页面上显示两个图标，然后在需要时隐藏/显示相应的图标。

这是我的标记，其中 @(item.Id)) 将填充一个整数。

<td>
  <span id="actionItemDate@(item.Id)">@item.FollowUp.ToShortDateString()</span>
  <i class="fa fa-pencil-alt fa-xs" id="actionItemEditDate@(item.Id)" onclick="actionItemEditDate(@item.Id)"></i>
  <i class="fa fa-save fa-xs invisible" id="actionItemSaveDate@(item.Id)"></i>
</td>

当我查看页面时，它呈现为:

<td>
  <span id="actionItemDate3">12/7/2017</span>
  <svg class="svg-inline--fa fa-pencil-alt fa-w-16 fa-xs" id="actionItemEditDate3" onclick="actionItemEditDate(3)" aria-hidden="true" data-fa-processed="" data-prefix="fa" data-icon="pencil-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"></path></svg>
  <!-- <i class="fa fa-pencil-alt fa-xs" id="actionItemEditDate3" onclick="actionItemEditDate(3)"></i> -->
  <svg class="svg-inline--fa fa-save fa-w-14 fa-xs invisible" id="actionItemSaveDate3" aria-hidden="true" data-fa-processed="" data-prefix="fa" data-icon="save" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z"></path></svg>
  <!-- <i class="fa fa-save fa-xs invisible" id="actionItemEditDate3"></i> -->
</td>

我的actionItemEditDate js函数定义如下:

function actionItemEditDate(id) {
  $("#actionItemDate" + id).text("test");
  $("#actionItemDate" + id).siblings($(".fa-pencil-alt")).addClass("invisible");
  $("#actionItemDate" + id).siblings($(".fa-save")).removeClass("invisible");
}

当我单击铅笔时，我的文本更改成功，并且保存图标显示，但是铅笔不会隐藏。为什么？

Answer 1

是的，FontAwesome 5 用 SVG 元素替换了您的标记，但它也复制了原始属性，例如 id="..."。

我在尝试在这些 SVG 元素上使用 jQuery 添加/切换/删除类时也遇到问题， 我仍然不知道为什么 ，因为 jQuery simply can't .

但是，您可以使用 show/hide 甚至 toggle实现你想要的:

function actionItemEditDate() {
  $("#actionItemDate").text("test");
  $(".toggle").toggle();
}

function actionItemSaveDate() {
  $("#actionItemDate").text("Saved !");
  $(".toggle").toggle();
}

.invisible {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

<span id="actionItemDate">01/01/2018</span>
<i class="fa fa-pencil-alt fa-xs toggle" id="actionItemEditDate" onclick="actionItemEditDate()"></i>
<i class="fa fa-save fa-xs toggle invisible" id="actionItemSaveDate" onclick="actionItemSaveDate()"></i>

我将 toggle 类添加到您的图标中，并调用 jQuery 的 toggle 在单击时显示/隐藏它们。您还可以使用show和 hide像这样:

function actionItemEditDate() {
  $("#actionItemDate").text("test");
  $("#actionItemSaveDate").show();
  $("#actionItemEditDate").hide();
}

function actionItemSaveDate() {
  $("#actionItemDate").text("Saved !");
  $("#actionItemSaveDate").hide();
  $("#actionItemEditDate").show();
}

.invisible {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

<span id="actionItemDate">01/01/2018</span>
<i class="fa fa-pencil-alt fa-xs toggle" id="actionItemEditDate" onclick="actionItemEditDate()"></i>
<i class="fa fa-save fa-xs toggle invisible" id="actionItemSaveDate" onclick="actionItemSaveDate()"></i>