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元素中調用事件應該可以解決此問題。