由于我试图向您展示的源代码相当漫长而复杂,我只是提供一个链接到我遇到麻烦的页面。
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代码:
<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并注意它不会做我想做的一切。
期待您能提供给我的所有帮助!
UPDATE
$('input[disabled]:not(:checked)').next('span').addClass('strike');
我认为上面的代码是我的问题出现的地方......是否有一些关于使我的属性在IE中无法正确读取的问题?
您需要正确关闭输入标签。
<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")
只会选择下一个元素,如果它是一个跨度。