在Internet Explorer中，addClass和removeClass无法正常工作

Question

在Internet Explorer中，addClass和removeClass无法正常工作

8

当我使用jQuery的addClass和removeClass函数来改变Internet Explorer (IE)中复选框的外观时，它们不能正常工作。然而，在其他浏览器中，它们可以正常工作。

以下是一个示例代码，用于说明我的问题：

$('input:#chkbox').click(function()
    {
        //if($(this).is(":checked")){
        if($('input:#chkbox').is(":checked"))
        {
            $('input:#chkbox').next("label").addClass("etykieta_wybrana");
        }
        else
        {
            $('input:#chkbox').next("label").removeClass("etykieta_wybrana");
        }
    });

为了进一步测试这个功能，您可以使用jsFiddler运行代码（不适用于IE）：http://jsfiddle.net/tejek/pZJMd/

- Tejek

2个回答

1

这个选择器 input:#chkbox 看起来很奇怪。如果你只有一个 ID 为 #chkbox 的元素（而且这个元素是一个 <input /> 字段），请尝试使用 #chkbox。

另外，你应该缓存 $('#chkbox') 的结果，例如：

var $chkbox = $('#chkbox');
$chkbox.click(function() {
    if ($chkbox.is(":checked")) {
        $chkbox.next("label").addClass("etykieta_wybrana");
    } else {
        $chkbox.next("label").removeClass("etykieta_wybrana");
    }
});

你甚至可以使用 .toggleClass() 与 switch（第二个参数，未经测试）一起使用：

var $chkbox = $('#chkbox');
$chkbox.click(function() {
    $chkbox.next("label").toggleClass("etykieta_wybrana", $chkbox.is(":checked"));
});

免责声明
不，这并不解释为什么它在Fx、Chrome等浏览器中可以工作，而在IE中不能。我猜测选择器的实现在不同的浏览器之间有所不同。一般来说，这可能甚至不能解决问题，只是提示潜在的问题（和一个“更清洁”的解决方案）。

- jensgram

或者，如果您确定它是<input type="checkbox" />，则使用$chkbox.checked。参见利用jQuery强大的功能访问元素属性。 - jensgram

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rsp · Accepted Answer

您的选择器应该是$('#chkbox')，如果您想要它仅适用于一个复选框，即具有id chkbox的复选框，或者它应该是$('input:checkbox')，如果您希望它适用于每个复选框。

此外，最好使用change事件而不是click事件，因为click事件（理论上）如果更改不是通过鼠标单击进行的，则不应触发。

也许尝试像这样的东西：

$('input:checkbox').change(function () {
    var $this = $(this);
    if( $this.is(':checked') ) {
        $this.next('label').addClass('etykieta_wybrana');
    } else {
        $this.next('label').removeClass('etykieta_wybrana');
    }
});

请查看演示。

如果没有帮助，请尝试在HTML中手动添加和删除类，以查看问题是否不是添加类而是通过某些奇怪的quirks模式渲染等原因导致未显示添加类的效果。

确保您的HTML以类似以下内容开头：

<!doctype html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">

为了确保您始终充分利用IE渲染引擎。