jQuery浏览器兼容性(IE)

由于我试图向您展示的源代码相当漫长而复杂,我只是提供一个链接到我遇到麻烦的页面。

http://www.thesportinghub.com/lms/make-my-picks

如果您在Google Chrome或最新版本的Firefox(5或6)中使用此脚本,您将会注意到此脚本中的jQuery是如何工作的。 它完全适用于我希望它在这些浏览器中工作的方式。

但是,我目前无法弄清楚为什么它在IE6,IE7和IE8中无法正常工作…我愿意对IE6说“无论如何”,但我真的希望能在IE7和IE8中使用它。 通过查看我的源代码,您可以看到导致IE7和IE8中出现问题的任何内容。

主要问题(在Chrome浏览器中使用jQuery后会注意到,然后在IE中),当点击一个团队时,它将禁用输入字段并在其余几周内通过该团队进行罢工。 但是,输入在IE中正确禁用,但是点击(jQuery中的addClass)无法正常工作。

我愿意提供更多信息….我不想让信息超载。 但这是一个我一直在努力修复几个小时的问题。

预先感谢您的帮助。 我会接受最好的答案并投票! 谢谢!

代码更新如下

这是我目前的javascript / jquery代码:

  $(document).ready(function () { $('.radio:checked').addClass("selected"); $('.pickbox').text($('.radio:checked').val()); var selected_week = $('#weekselect').val(); $('table.weekbox').hide(); $('table#weekbox' + selected_week).show(); $('span.selection.text').html('
My Week ' + selected_week + ' Selection:'); $('input.radio').change(function () { $('.teambox').find('span.strike').removeClass('strike'); var selected = $(this).val(); var us_selected = selected.replace(/ /g, ""); $('.radio:not(:checked)').removeClass('selected'); $('.radio:not(:checked)').next('span').css('color', ''); $('.radio:not(:checked)').removeAttr('disabled'); $('.radio:checked').addClass('selected'); $('.pickbox').text($(this).val()); $('.pickbox').css('border', '3px dashed #88cc33'); //$('.pickbox').text($('.teambox').find('span.' + us_selected).text()); $('.teambox').find('span.' + us_selected).addClass('strike'); $('.selected').each(function () { var selected_team = $(this).val(); var x_selected_team = selected_team.replace(/ /g, ""); $('.teambox').find('span.' + x_selected_team).text(selected_team).addClass('strike'); $('table.weekbox').find('td input[value="' + selected_team + '"]').attr('disabled', 'disabled'); $('.selected').next('span').css('color', '#88cc33'); }); }); $('#weekselect').change(function () { var selected_week = $('#weekselect').val(); if ($('input[name="Week' + selected_week + '"]').is(':not(:checked)')) { $('table.weekbox').hide(); $('table#weekbox' + selected_week).show(); $('span.selection.text').html('
My Week ' + selected_week + ' Selection:'); $('.pickbox').css('border', '1px dashed #FFFFFF'); $('.pickbox').text(''); } $('table.weekbox').hide(); $('table#weekbox' + selected_week).show(); $('span.selection.text').html('
My Week ' + selected_week + ' Selection:'); $('input:not(:checked)').next('span').removeClass('strike'); $('input[disabled]:not(:checked)').next('span').addClass('strike'); $('.pickbox').text($('input.radio[name="Week' + selected_week + '"].selected').val()); if ($('.pickbox').text() != "") { $('.pickbox').css('border', '3px dashed #88cc33'); } $('.selected').each(function () { var selected_team = $(this).val(); var x_selected_team = selected_team.replace(/ /g, ""); $('.teambox').find('span.' + x_selected_team).text(selected_team).addClass('strike'); }); }); });

以下是这个jQuery应该影响的一些DOM元素:

 
Week 1
Date Away Team Home Team Time (EST)
09/08/11 New Orleans Saints Green Bay Packers 8:30 PM
09/11/11 Atlanta Falcons Chicago Bears 1:00 PM
09/11/11 Cincinnati Bengals Cleveland Browns 1:00 PM
09/11/11 Buffalo Bills Kansas City Chiefs 1:00 PM
09/11/11 Philadelphia Eagles St. Louis Rams 1:00 PM
09/11/11 Tennessee Titans Jacksonville Jaguars 1:00 PM
09/11/11 Pittsburgh Steelers Baltimore Ravens 1:00 PM
09/11/11 Indianapolis Colts Houston Texans 1:00 PM
09/11/11 Detroit Lions Tampa Bay Buccaneers 1:00 PM
09/11/11 New York Giants Washington Redskins 4:15 PM
09/11/11 Carolina Panthers Arizona Cardinals 4:15 PM
09/11/11 Minnesota Vikings San Diego Chargers 4:15 PM
09/11/11 Seattle Seahawks San Francisco 49ers 4:15 PM
09/11/11 Dallas Cowboys New York Jets 8:20 PM
09/12/11 New England Patriots Miami Dolphins 7:00 PM
09/12/11 Oakland Raiders Denver Broncos 10:15 PM

如上所述 ,可能更容易访问我已发送给您的所有链接(上图)并尝试首先查看Chrome中的代码(并了解它是如何工作的,我希望它如何工作),然后尝试在IE 6 – IE 8并注意到它不会做我想做的一切。

期待您能提供给我的所有帮助!

UPDATE

 $('input[disabled]:not(:checked)').next('span').addClass('strike'); 

我认为上面的代码是我的问题出现的地方……是否有一些关于使我的属性在IE中无法正确读取的问题?

您需要正确关闭输入标签。

  //Incorrect  //Correct 

Chrome似乎很聪明,可以修复它并将视为前一个输入元素的一部分,但是如果你在IE中尝试这个jsfiddle ,你会发现它认为是下一个标记。 $("foo").next("span")只会选择下一个元素(如果是span)。

http://jsfiddle.net/v9GaX/1/