字体在Safari上出现了很棒的链接问题，适用于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>

我在所有三个浏览器中都有一个用于"img"元素的onclick，但用于"I"元素的onlick只适用于其中的两个。我需要它成为I元素的原因是，当单击图标时，我会将类从图标展开更改为图标折叠。有线索吗？

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元素中调用事件应该可以解决这个问题。