addClass和removeClass在Internet Explorer中不工作

当我使用它们更改Internet Explorer（IE）中复选框的外观时，jQuery函数addClass和removeClass无法正常工作。但是，它们在其他浏览器中运行良好。addClass和removeClass在Internet Explorer中不工作

下面是示例代码来说明我的问题：

$('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/

来源

2011-03-10 Tejek

此选择input:#chkbox似乎奇怪的。如果只有一个ID为#chkbox的元素，则尝试#chkbox（这恰好是<input />字段）。

此外，你应该缓存结果的$('#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中。我猜浏览器之间的选择器实现有些不同。一般来说，这甚至不能解决问题，只能暗示潜在的问题（和“更清洁”的解决方案）。

来源

2011-03-10 09:49:35 jensgram

或者，'$ chkbox.checked'如果你确定它是一个''，比照。 [利用jQuery的强大功能来访问元素的属性]（http://whattheheadsaid.com/2010/10/utilizing-the-awesome-power-of-jquery-to-access-properties-of-an-element ）。 – jensgram 2011-03-10 10:11:21

你的选择要么是$('#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'); 
    } 
});

见DEMO。

如果它没有帮助，然后尝试在HTML中手动添加和删除类，以查看问题是否可能没有添加类，但没有显示通过一些奇怪的怪异模式渲染或类似的东西添加类的效果。

确保像这样的东西开始你的HTML：

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

，以确保您始终获得最出的IE渲染引擎。

来源

2011-03-10 10:14:33 rsp

+1好点。 – jensgram 2011-03-10 10:17:26

谢谢，现在我才知道，如何在IE中获得固定的大部分渲染问题 – 2013-09-20 08:41:27

addClass和removeClass在Internet Explorer中不工作

回答

相关问题