jQuery浏览器兼容性(IE) [英] jQuery Browser Compatibility (IE)
问题描述
由于我要向您展示的源代码相当长而且很复杂，因此我只想提供指向我遇到麻烦的页面的链接.
Since the source code I am trying to show you is rather long and complex, I am simply going to provide a link to the page I am having troubles with.
http://www.thesportinghub.com/lms/make-my-picks
如果您在Google Chrome或Firefox的最新版本(5或6)中使用此脚本，则会注意到此脚本中的jQuery是如何工作的.它完全可以按照我希望在这些浏览器中的工作方式工作.
If you work with this script in Google Chrome or the latest versions of Firefox (5 or 6), you will notice how the jQuery in this script is intended to work. It works exactly how I want it to work in those browsers.
但是，我目前很难弄清为什么它在IE6，IE7和IE8中无法正常工作...我愿意对IE6说无论如何"，但我真的很希望能在IE6中发挥作用IE7和IE8.通过查看我的源代码，您可以看到导致IE7和IE8问题的任何信息.
However, I am currently having trouble figuring out why it is not working correctly in IE6, IE7, and IE8... I am willing to say "whatever" to IE6, but I am really hoping to get this to work in IE7 and IE8. By viewing my source code, is there anything you can see that is causing the problems in IE7 and IE8.
主要问题(在Chrome浏览器中，然后在IE中使用jQuery后，您会注意到)，当单击一个团队时，它将禁用输入字段，并在其余团队中对整个团队进行罢工数周.但是，输入已在IE中正确禁用，但是警告(jQuery中的addClass)无法正常工作.
The main issue (as you will notice after you play with the jQuery in Chrome, and then in IE), is that when a team is clicked, it will disable the input field and put a strike through that team throughout the rest of the weeks. However, the input is disabling correctly in IE, but the strike (addClass in jQuery) is not working.
我愿意提供更多信息....我现在还不想超载信息.但这是我几个小时来一直在努力解决的问题.
I am willing to provide more information.... I don't want to overload info quite yet. But this has been an issue I have been struggling to fix for a few hours now.
预先感谢您的帮助.我将接受最佳答案并投票！谢谢！
Thank you in advance for your help. I will accept the best answer and vote up! Thanks!
代码更新低于
这是我当前的javascript/jquery代码:
Here is my current javascript/jquery code:
<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元素:
Here is some of the DOM elements this jQuery should be affecting:
<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中尝试一下，请注意它无法完成我希望它做的所有事情.
As mentioned above, it is probably easier to visit the attached link (above) I have sent you all and try to look at the code first in Chrome (and see how it works how I expect it to work), and then try it in IE 6 - IE 8 and notice how it does not do everything I am wanting it to do.
期待您能为我提供的所有帮助！
Look forward to all the help you can provide me!
更新
$('input[disabled]:not(:checked)').next('span').addClass('strike');
我认为上面的代码就是我的问题所在...使我的属性无法在IE中正确读取吗?
I think the above code is where my problem is coming up... is there something funky about making my attributes not read correctly in IE?
推荐答案
您需要正确关闭输入标签.
You need to close your input tags correctly.
<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>视为先前输入元素的一部分，但是如果您尝试使用 jsfiddle 在IE中，您可以看到它认为</input>是下一个标记. $("foo").next("span")仅在下一个元素为跨度时才会选择.
Chrome seems to be smart enough to fix it and treat the </input> as part of the previous input element, but if you try this jsfiddle in IE, you can see it thinks </input> is the next tag. $("foo").next("span") will only select the next element if it is a span.
这篇关于jQuery浏览器兼容性(IE)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
