jQuery 브라우저 호환성 (IE)

Question

내가 보여 주려고하는 소스 코드가 다소 복잡하고 길기 때문에 문제가있는 페이지에 대한 링크를 제공 할 예정입니다.

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

Google 크롬에서이 스크립트 또는 파이어 폭스 (5 또는 6),이 스크립트에서 jQuery를가 작동 방식의 알의 최신 버전에서 작동합니다. 그것은 내가 그 브라우저에서 작동하는 방법을 정확히 작동합니다.

그러나 저는 현재 IE6, IE7 및 IE8에서 올바르게 작동하지 않는 이유를 파악하는 데 문제가 있습니다. IE6에 대해 "무엇이든지"라고 ​​기꺼이 말하고 싶지만 실제로 작동하도록하고 싶습니다. IE7과 IE8에서. 내 소스 코드를 보면 IE7과 IE8에서 문제를 일으키는 것을 볼 수 있습니다.

Chrome에서 jQuery로 재생 한 다음 IE에서 재생 한 후 알게 될 주요 문제는 팀을 클릭하면 입력란이 사용 중지되고 팀 전체에서 파업을당하는 것입니다. 나머지 주. 그러나 IE에서 입력이 올바르게 비활성화되어 있지만 strike (jQuery의 addClass)가 작동하지 않습니다.

나는 더 많은 정보를 기꺼이 .... 나는 아직 정보를 너무 많이 오버로드하고 싶지 않다. 그러나 이것은 내가 지금 몇 시간 동안 고치기 위해 고심하고있는 이슈였습니다.

도움을 주셔서 감사합니다. 나는 최선의 대답을 받아 들여 투표 할 것이다! 감사! 코드

업데이트는 아래 여기

내용입니다 나의 현재 자바 스크립트/jQuery 코드입니다 :

<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> 

: 여기

<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> 

는 DOM 요소이 jQuery를가 영향을 줄 수 있어야의 일부입니다

위에서 언급 한 바와 같이 일 수도 있고 아마도 쉬울 것입니다 첨부 된 링크 (위)를 방문하여 Chrome에있는 코드를 처음 보았습니다 (작동 방식을 확인하는 방법 참조). 그리고 IE 6에서 시도해보십시오 - IE 8 및 예고 그것이 내가 원하는 모든 것을하지 않는 방법.

나에게 제공 할 수있는 모든 도움을 기대하십시오! UPDATE

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

내 속성이 IE에서 제대로 읽지 만드는 방법에 대한 펑키 뭔가가 ... 내 문제가 오는 경우 위의 코드는 생각?

Answer 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 

은 크롬을 수정하고 이전의 입력 요소의 일부로 </input> 치료 똑똑 것 같다,하지만 당신은 IE에서이 jsfiddle을 시도하는 경우, 당신은 </input> 다음 태그입니다 생각 볼 수 있습니다. $("foo").next("span")은 스팬 인 경우 다음 요소 만 선택합니다.

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