8

我正在尝试做的事情

我刚从 Font Awesome 4.7 切换到 Font Awesome 5，一切都很好，除了一件事：在我的网站的一部分，我使用了一个很棒的字体图标作为切换-esk 按钮。单击时，我想将“打开”的心更改为“关闭”的心图标（fas fa-heart <-> far fa-heart）。我可以通过更改浏览器检查器中 SVG 元素中的数据前缀来做到这一点。

问题

我的问题在于绑定点击监听器，因为那里的元素被删除并替换为 SVG。我动态地将元素添加到具有这些心形图标的页面上，并在使用 JS 把手生成 HTML 之后，我使用 jquerys .on("click") 方法来获取单击按钮并切换类的时间。当元素没有被替换时这很好，但是随着对 SVG 的更改，这样做的新方法是什么？

可能的解决方案

我通读了 Font Awesome 的“操作方法”指南，但它们还没有涵盖这样的主题。这是人们想要做的常见事情，因此获得人们可以使用的解决方案列表会很好。以下是我想到的两个想法，但是 FontAwesome 必须提供的一个想法，但我很好奇是否有更好的方法：

  1. 在添加侦听器之前使用短暂的超时时间 - 但是充其量似乎很hacky。
  2. 单击时使用包装器元素，然后在每次单击时搜索 SVG 元素。
  3. FontAwesome 可以在图标被替换时提供回调。

示例小提琴

这是一个简化的示例，其中一个按钮被动态附加到文档中（如果使用 $(document).ready() 可以正常工作，但我正在执行 API 请求，然后动态生成 html）。单击按钮不会调用侦听器，因为元素尚未完成将元素替换为 SVG。

https://jsfiddle.net/L748ownw/

<div id='container'></div>

$("#container").append("<i id='heart' class='far fa-heart'></i>");
$(".far").on("click", function() {
  console.log("clicked");
});

这个例子适用于 FontAwesome 4.7，因为元素没有被替换。

4

2 回答 2

4

在最佳情况下pointer-events: none;将修复svg点击监听器问题。但在这种情况下，这个解决方案不起作用。我为您提供了更好的解决方案，在标签上设置onclick属性并使用.<i>jqueryjavascript

$("#heart").attr('onClick', 'callFunction(this)');

但正如我所说的comment toggleClass或任何改变class都不能解决你的问题，因为它将<i>标签转换为svg所以你不能通过切换类名来改变心的形状。唯一的解决方案是在转换之前更改它svg：

 var click = false;
  function callFunction(el) {
    if (!click) {
      $("#container").empty().append("<i id='heart' class='fas fa-heart'></i>");
      $("#heart").attr('onClick', 'callFunction(this)');
      click = true;
    } else {
      $("#container").empty().append("<i id='heart' class='far fa-heart'></i>");
      $("#heart").attr('onClick', 'callFunction(this)');
      click = false;
    }
  }

Working Demo

于 2017-12-17T07:04:30.593 回答
2

Fontawsome 有一个很好的例子来说明如何处理他们网站上的点击事件。

这种方法对我很有用，因为我正在寻找“toggleClass”onClick。似乎比上一个答案简单一些。我已经对此进行了测试，并且运行良好。 

document.addEventListener('DOMContentLoaded', function () {
$('button').on('click', function () {
  $(this)
    .find('[data-fa-i2svg]')
    .toggleClass('fa-angle-down')
    .toggleClass('fa-angle-right');
  });
});

这里的例子

我决定为任何为此苦苦挣扎的人添加我自己的示例：

document.addEventListener('DOMContentLoaded', function () {
  jQuery('.ppolicy-link').on('click', function () {
            var collapsed=jQuery(this).find('[data-fa-i2svg]').hasClass('fa-plus-square');
            jQuery('.btn-link').find('[data-fa-i2svg]').removeClass('fa-minus-square');
            jQuery('.btn-link').find('[data-fa-i2svg]').addClass('fa-plus-square');
            if(collapsed)
                jQuery(this).find('[data-fa-i2svg]').toggleClass('fa-plus-square fa-minus-square')
        });
    });

我正在使用 jQuery 无冲突和 Bootstrap 4 手风琴，WordPress。这对我很有用。

于 2018-06-11T18:33:40.710 回答