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来实现您的目标：

＆＃13;

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

＆＃13;

.invisible {
  display: none;
}

＆＃13;

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

＆＃13;

我将toggle类添加到您的图标中并调用了jQuery＆＃39; toggle来显示/隐藏它们。你也可以像这样使用show和hide：

＆＃13;

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

＆＃13;

.invisible {
  display: none;
}

＆＃13;

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

＆＃13;

如何替换fontawesome 5图标？

1 个答案: