Safari上的Font-Awesome onlick问题，可在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')">

以下内容适用于Font-Awesome，并且在Chrome和Firefox上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种浏览器中都有一个onclick用于“ img”元素，但是在“ i”元素中仅onclick可以在其中两个浏览器中使用。之所以需要将其作为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的类以更改颜色。 代码的应用不同，但思路相同： 提琴

如果您已经具有类似或完全类似的功能，则此处的主要要点是从脚本而不是在HTML元素中调用事件应该可以解决此问题。