1

以下适用于在 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。有什么线索吗？

4

1 回答 1

0

我能想到的唯一解决方案是从脚本源本身调用 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 元素中调用事件应该可以解决问题。

于 2013-09-02T20:18:59.257 回答