在IE8中使用proto.io使开/关切换器起作用

Question

Proto.io 提供了一个非常好的使用 CSS 实现开关按钮的解决方案。然而，它在 IE8 中不起作用。 http://proto.io/freebies/onoff/

有人知道如何使用 JavaScript 解决它吗？或者您有其他推荐的开关按钮解决方案，可以在 IE8 中使用吗？

- hvu89

Answer 1

感谢使用我们的Proto.io翻转开关 :)

以下是如何使用JavaScript启用IE8支持的方法。

您需要添加CSS以根据“onoffswitch-checked”类更改翻转开关的状态，然后使用JavaScript切换该类以在单击翻转开关时进行切换。

首先在CSS中添加这两个声明：

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

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

然后，使用JavaScript根据复选框是否被选中来切换“onoffswitch-checked”类：

接下来的JavaScript代码可以实现这个功能：

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

另外，如果你已经选择了“默认开启”选项，请确保将“onoffswitch-checked”类添加到你的HTML中：

Also, 如果你已经选择了“Switch ON by default”选项，请确保将“onoffswitch-checked”类添加到你的HTML中：

<div class="onoffswitch onoffswitch-checked">

注：

有一种稍微更简洁的方法，可以使用复选框上的change()事件来代替标签上的click()事件，但不幸的是，在IE8中，当点击标签而不是复选框时，change()事件不会被触发。

在复选框上触发选中的类别（checked class）比在父元素上更好，但是，当一个类别（class）改变时，IE8不会刷新相邻兄弟元素CSS（+）:（

- anna.mi

---

非常感谢。即使今天很多客户无法从IE8升级，这对我帮助很大！ - Fishcake

Answer 2

Proto.io网页中提到：“...IE8不支持CSS :checked选择器”，因此不受支持。这意味着您可以通过包含IE的polyfill来解决这个问题，例如selectivizr。

编辑：Proto.io页面还提到（通过浏览器图标列表上的IE工具提示），可以通过添加一些Javascript来支持IE8。实际上，这个开关的作者是anna.mi，她在这个答案中提供了代码。

- Owlvark

---

谢谢。我尝试实现它，但没有成功。我需要在selectivizr中添加一些javascript吗？ - hvu89

你尝试在你的网站上实现它了吗？jsfiddle在IE8上有已知问题... - Owlvark