Question

我想做的事

我刚刚从Font Awesome 4.7切换到Font Awesome 5，除了一件事之外，一切都很顺利：在我的网站的一部分中，我使用字体真棒图标作为切换 - esk按钮。点击后，我想更改＆＃34;打开＆＃34;关心＆＃34;关闭＆＃34;心脏图标（fas fa-heart＆lt; - ＆gt; far fa-heart）。我可以通过在浏览器的检查器中更改SVG元素中的数据前缀来实现此目的。

问题

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

可能的解决方案

我读过Font Awesome＆＃34; How To＆＃34;指南，他们还没有涵盖这样的主题。这是人们想要做的常见事情，因此获得人们可以使用的解决方案列表会很不错。以下是我想到的两个想法，但是FontAwesome必须提供的一个想法，但我很好奇是否有更好的方法：

在添加监听器之前使用短暂的超时 - 但最好是hacky。
点击时使用包装元素，然后在每次点击时搜索SVG元素。
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，因为元素未被替换。

Answer 1

在最佳情况下pointer-events: none;将修复svg点击侦听器问题。但在这种情况下，此解决方案不起作用。我有一个更好的解决方案，在onclick代码上设置<i>属性，并使用jquery处理javascript函数。

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

但正如我在comment toggleClass或任何有关更改class的内容所说的那样无法解决您的问题，因为它会将<i>标记转换为svg，因此您可以＆＃39;通过切换班级名称来改变心的形状。唯一的解决方案是在转换为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

Answer 2

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

这个方法对我很有用，因为我正在寻找onClick上的“toggleClass”。似乎比之前的答案简单一点。我测试了这个并且它运行良好。

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

Examples Here

我决定为那些正在努力解决这个问题的人添加我自己的例子：

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 no-conflict和Bootstrap 4手风琴，WordPress。这对我很有用。

ClickAwesome 5点击活动？

2 个答案: