addClass和removeClass在Internet Explorer中不起作用

Question

当我使用它们来改变Internet Exploer(IE)中复选框的外观时,jQuery函数addClass和removeClass无法正常工作.但是,它们在其他浏览器中运行良好.

以下示例代码用于说明我的问题:

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

Answer 1

这个选择器input:#chkbox看起来很奇怪。#chkbox如果您只有一个具有 ID 的元素#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 中无效。我猜浏览器之间的选择器实现有些不同。一般来说，这甚至可能无法解决问题，而只是暗示潜在的问题（以及“更干净”的解决方案）。