使用proto.io在IE8中打開/關閉開關

Question

Proto.io為使用CSS的開/關切換按鈕提供了一個非常好的解決方案。 但是，它在IE8中不起作用。 http://proto.io/freebies/onoff/

任何人都知道如何用js修復它？ 或者是否有其他開/關開關按鈕解決方案，你會建議在IE8中工作？

Answer 1

感謝您使用我們的Proto.io flipswitch :)

以下是如何使用javascript啟用對IE8的支持。

您需要做的是添加css，它將根據“onoffswitch-checked”類更改flipswitch的狀態，然后在單擊flipswitch時使用javascript切換該類。

首先在css中添加這兩個聲明：

.onoffswitch-checked .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checked .onoffswitch-switch {
    right: 0px; 
}

然后，使用javascript切換“onoffswitch-checked”類，具體取決於是否選中該復選框：

$(document).ready(function(){
    $('.onoffswitch-label').click(function(){
        $(this).parent().toggleClass('onoffswitch-checked');
    });
});

此外，如果您選擇了“默認啟用”選項，請確保將“onoffswitch-checked”類添加到您的html：

<div class="onoffswitch onoffswitch-checked">

筆記：

使用復選框上的change（）事件而不是標簽上的click（）有一種更簡潔的方法來實現這一點，但遺憾的是，當單擊標簽而不是復選框時，IE8不會觸發change（）事件。

在復選框上而不是在父項上觸發已檢查的類也會更好，但是當更改類時，IE8不會刷新相鄰的兄弟CSS（+）:(

Answer 2

Proto.io頁面提到“...... IE8不支持CSS：checked selector”所以不支持。 這意味着你可以通過在IE中包含一個polyfill來解決這個問題，例如selectivizr 。

編輯：Proto.io頁面還提到（通過瀏覽器圖標列表上的IE工具提示）IE8可以通過一些添加的Javascript來支持。 此代碼在anna.mi的答案中提供， anna.mi是此開關的實際作者。