Safari 上的 Font-Awesome onclick 问题，适用于 Chrome 和 Firefox

Question

以下内容适用于在 Chrome 和 Firefox 和 Safari 中使用 onclick 的 Font-Awesome。

<img class=“g120 icon-large icon-expand“ border=“0” name=“exp49269” id=“exp49269” alt=“Expand Body” title=“Expand Body" onclick="alert('test')">

以下内容适用于 Chrome 和 Firefox 上的 Font-Awesome 和 onclick，但不适用于 Safari。

<i class=“g120 icon-large icon-expand” border=“0” name=“exp49269” id=“exp49269” alt="Expand Body" title="Expand Body" onclick="alert('test')"></i>

我在所有 3 个浏览器中都有一个适用于“img”元素的 onclick，但适用于“i”元素的 onclick 仅适用于其中 2 个。我需要它作为 i 元素的原因是当图标被点击，我将把类从 icon-expand 更改为 icon-collapse。有任何线索吗？

Answer 1

我能想到的唯一解决方案是从脚本源本身调用 JavaScript 事件。例如，您有：

<i class=“g120 icon-large icon-expand” border=“0” name=“exp49269” id=“exp49269” alt="Expand Body" title="Expand Body"></i>

我假设您已经有一个更改类的功能，但可以肯定的是，使用 JQuery：

var $exp49269 = $('#exp49269'); // set a variable to store icon ID

function collapseIcon() {

    this.removeClass('icon-expand').addClass('icon-collapse');

}

$exp49269.click(collapseIcon); // call the function on click

如果需要多次展开和折叠，可以使用条件语句检查是否有某个类，然后执行类更改：

var $exp49269 = $('#exp49269'); // set a variable to store icon ID

function collapseIcon() {

    // check if the clicked icon has the icon-expand or icon-collapse class
    if ($(this).hasClass('icon-expand')) {

        this.removeClass('icon-expand').addClass('icon-collapse');

    } else {

        this.removeClass('icon-collapse').addClass('icon-expand');

}

$exp49269.click(collapseIcon); // call the function on click

我制作了一个 jsFiddle 来展示它的工作原理，更改 div 的类以更改颜色。代码的不同应用，但相同的想法：Fiddle

如果您已经有一个类似或完全相同的函数，这里的重点是从您的脚本而不是 HTML 元素中调用事件应该可以解决问题。