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>

我有一个onclick工作在所有3个浏览器中的“img”元素，但onclick为“i”元素只适用于其中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元素中调用事件应该可以解决问题。

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

1 个答案: