jQuery 浏览器兼容性 (IE)答案

【问题标题】：jQuery Browser Compatibility (IE)jQuery 浏览器兼容性 (IE)
【发布时间】：2011-11-05 18:03:58
【问题描述】：

由于我试图向您展示的源代码相当长且复杂，因此我将提供一个指向我遇到问题的页面的链接。

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

如果您在 Google Chrome 或最新版本的 Firefox（5 或 6）中使用此脚本，您会注意到此脚本中的 jQuery 是如何工作的。它完全按照我希望它在这些浏览器中的工作方式工作。

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

主要问题（您在 Chrome 和 IE 中使用 jQuery 后会注意到）是，当一个团队被点击时，它会禁用输入字段并在其余部分中对该团队进行罢工的几周。但是，输入在 IE 中正确禁用，但罢工（jQuery 中的 addClass）不起作用。

我愿意提供更多信息....我还不想过多地提供信息。但这是我几个小时以来一直在努力解决的问题。

提前感谢您的帮助。我会接受最佳答案并投票！谢谢！

代码更新如下

这是我当前的 javascript/jquery 代码：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(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('<br/>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('<br/>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('<br/>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');
        });

    });
});
</script>

这是 jQuery 应该影响的一些 DOM 元素：

<table id="weekbox1" class="weekbox" cellpadding="5" cellspacing="1" bgcolor="#000000" width="100%"> 
<tr> 
<td class="three" colspan="4">Week 1</td> 
</tr> 
<tr> 
<td class="one">Date</td> 
<td class="one">Away Team</td> 
<td class="one">Home Team</td> 
<td class="one">Time (EST)</td> 
</tr> 
<tr> 
<td class="two">09/08/11</td> 
<td class="two"> 
<input type="radio" id="New Orleans Saints" class="radio" name="Week1" value="New Orleans Saints"></input> 
    <span>New Orleans Saints</span> 
</td> 
<td class="two"> 
<input type="radio" id="Green Bay Packers" class="radio" name="Week1" value="Green Bay Packers"></input> 
    <span>Green Bay Packers</span> 
</td> 
<td class="two">8:30 PM</td> 
</tr> 
<tr> 
<td class="two">09/11/11</td> 
<td class="two"> 
<input type="radio" id="Atlanta Falcons" class="radio" name="Week1" value="Atlanta Falcons"></input> 
    <span>Atlanta Falcons</span> 
</td> 
<td class="two"> 
<input type="radio" id="Chicago Bears" class="radio" name="Week1" value="Chicago Bears"></input> 
    <span>Chicago Bears</span> 
</td> 
<td class="two">1:00 PM</td> 
</tr> 
<tr> 
<td class="two">09/11/11</td> 
<td class="two"> 
<input type="radio" id="Cincinnati Bengals" class="radio" name="Week1" value="Cincinnati Bengals"></input> 
    <span>Cincinnati Bengals</span> 
</td> 
<td class="two"> 
<input type="radio" id="Cleveland Browns" class="radio" name="Week1" value="Cleveland Browns"></input> 
    <span>Cleveland Browns</span> 
</td> 
<td class="two">1:00 PM</td> 
</tr> 
<tr> 
<td class="two">09/11/11</td> 
<td class="two"> 
<input type="radio" id="Buffalo Bills" class="radio" name="Week1" value="Buffalo Bills"></input> 
    <span>Buffalo Bills</span> 
</td> 
<td class="two"> 
<input type="radio" id="Kansas City Chiefs" class="radio" name="Week1" value="Kansas City Chiefs"></input> 
    <span>Kansas City Chiefs</span> 
</td> 
<td class="two">1:00 PM</td> 
</tr> 
<tr> 
<td class="two">09/11/11</td> 
<td class="two"> 
<input type="radio" id="Philadelphia Eagles" class="radio" name="Week1" value="Philadelphia Eagles"></input> 
    <span>Philadelphia Eagles</span> 
</td> 
<td class="two"> 
<input type="radio" id="St  Louis Rams" class="radio" name="Week1" value="St  Louis Rams"></input> 
    <span>St. Louis Rams</span> 
</td> 
<td class="two">1:00 PM</td> 
</tr> 
<tr> 
<td class="two">09/11/11</td> 
<td class="two"> 
<input type="radio" id="Tennessee Titans" class="radio" name="Week1" value="Tennessee Titans"></input> 
    <span>Tennessee Titans</span> 
</td> 
<td class="two"> 
<input type="radio" id="Jacksonville Jaguars" class="radio" name="Week1" value="Jacksonville Jaguars"></input> 
    <span>Jacksonville Jaguars</span> 
</td> 
<td class="two">1:00 PM</td> 
</tr> 
<tr> 
<td class="two">09/11/11</td> 
<td class="two"> 
<input type="radio" id="Pittsburgh Steelers" class="radio" name="Week1" value="Pittsburgh Steelers"></input> 
    <span>Pittsburgh Steelers</span> 
</td> 
<td class="two"> 
<input type="radio" id="Baltimore Ravens" class="radio" name="Week1" value="Baltimore Ravens"></input> 
    <span>Baltimore Ravens</span> 
</td> 
<td class="two">1:00 PM</td> 
</tr> 
<tr> 
<td class="two">09/11/11</td> 
<td class="two"> 
<input type="radio" id="Indianapolis Colts" class="radio" name="Week1" value="Indianapolis Colts"></input> 
    <span>Indianapolis Colts</span> 
</td> 
<td class="two"> 
<input type="radio" id="Houston Texans" class="radio" name="Week1" value="Houston Texans"></input> 
    <span>Houston Texans</span> 
</td> 
<td class="two">1:00 PM</td> 
</tr> 
<tr> 
<td class="two">09/11/11</td> 
<td class="two"> 
<input type="radio" id="Detroit Lions" class="radio" name="Week1" value="Detroit Lions"></input> 
    <span>Detroit Lions</span> 
</td> 
<td class="two"> 
<input type="radio" id="Tampa Bay Buccaneers" class="radio" name="Week1" value="Tampa Bay Buccaneers"></input> 
    <span>Tampa Bay Buccaneers</span> 
</td> 
<td class="two">1:00 PM</td> 
</tr> 
<tr> 
<td class="two">09/11/11</td> 
<td class="two"> 
<input type="radio" id="New York Giants" class="radio" name="Week1" value="New York Giants"></input> 
    <span>New York Giants</span> 
</td> 
<td class="two"> 
<input type="radio" id="Washington Redskins" class="radio" name="Week1" value="Washington Redskins"></input> 
    <span>Washington Redskins</span> 
</td> 
<td class="two">4:15 PM</td> 
</tr> 
<tr> 
<td class="two">09/11/11</td> 
<td class="two"> 
<input type="radio" id="Carolina Panthers" class="radio" name="Week1" value="Carolina Panthers"></input> 
    <span>Carolina Panthers</span> 
</td> 
<td class="two"> 
<input type="radio" id="Arizona Cardinals" class="radio" name="Week1" value="Arizona Cardinals"></input> 
    <span>Arizona Cardinals</span> 
</td> 
<td class="two">4:15 PM</td> 
</tr> 
<tr> 
<td class="two">09/11/11</td> 
<td class="two"> 
<input type="radio" id="Minnesota Vikings" class="radio" name="Week1" value="Minnesota Vikings"></input> 
    <span>Minnesota Vikings</span> 
</td> 
<td class="two"> 
<input type="radio" id="San Diego Chargers" class="radio" name="Week1" value="San Diego Chargers"></input> 
    <span>San Diego Chargers</span> 
</td> 
<td class="two">4:15 PM</td> 
</tr> 
<tr> 
<td class="two">09/11/11</td> 
<td class="two"> 
<input type="radio" id="Seattle Seahawks" class="radio" name="Week1" value="Seattle Seahawks"></input> 
    <span>Seattle Seahawks</span> 
</td> 
<td class="two"> 
<input type="radio" id="San Francisco 49ers" class="radio" name="Week1" value="San Francisco 49ers"></input> 
    <span>San Francisco 49ers</span> 
</td> 
<td class="two">4:15 PM</td> 
</tr> 
<tr> 
<td class="two">09/11/11</td> 
<td class="two"> 
<input type="radio" id="Dallas Cowboys" class="radio" name="Week1" value="Dallas Cowboys"></input> 
    <span>Dallas Cowboys</span> 
</td> 
<td class="two"> 
<input type="radio" id="New York Jets" class="radio" name="Week1" value="New York Jets"></input> 
    <span>New York Jets</span> 
</td> 
<td class="two">8:20 PM</td> 
</tr> 
<tr> 
<td class="two">09/12/11</td> 
<td class="two"> 
<input type="radio" id="New England Patriots" class="radio" name="Week1" value="New England Patriots"></input> 
    <span>New England Patriots</span> 
</td> 
<td class="two"> 
<input type="radio" id="Miami Dolphins" class="radio" name="Week1" value="Miami Dolphins"></input> 
    <span>Miami Dolphins</span> 
</td> 
<td class="two">7:00 PM</td> 
</tr> 
<tr> 
<td class="two">09/12/11</td> 
<td class="two"> 
<input type="radio" id="Oakland Raiders" class="radio" name="Week1" value="Oakland Raiders"></input> 
    <span>Oakland Raiders</span> 
</td> 
<td class="two"> 
<input type="radio" id="Denver Broncos" class="radio" name="Week1" value="Denver Broncos"></input> 
    <span>Denver Broncos</span> 
</td> 
<td class="two">10:15 PM</td> 
</tr> 
</table>

如上所述，访问附加链接（上图）可能更容易我已经发送给大家并尝试先在 Chrome 中查看代码（以及看看它是如何工作的，我期望它如何工作），然后在 IE 6 - IE 8 中尝试它，并注意它是如何无法完成我希望它做的所有事情的。

期待您能为我提供的所有帮助！

更新

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

我认为上面的代码是我的问题出现的地方...有什么奇怪的地方会让我的属性在 IE 中无法正确读取吗？

【问题讨论】：

标签： php jquery xml internet-explorer compatibility

【解决方案1】：

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

<input type="radio" class="radio" name="Week1" value="New York Jets"></input> //Incorrect
<input type="radio" class="radio" name="Week1" value="New York Jets" /> //Correct

Chrome 似乎足够聪明地修复它并将</input> 视为前一个输入元素的一部分，但如果你在 IE 中尝试这个jsfiddle，你可以看到它认为</input> 是下一个标签。 $("foo").next("span") 只会选择下一个元素，如果它是一个跨度。

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

【讨论】：

哇……如果是这样的话……你就是我的英雄丹尼斯。
丹尼斯，做到了！太感谢了。哎呀。谢谢，谢谢，谢谢。