Сбой Jquery на IE7

Question

HTML:

<div id="overlay_weekPrize"> 
    <div class="prizePopupBanner">

    </div>
  <div id="weeklyPrizeImageBanner"><!--the big banner images/weeklyPrizeImageBanner-->
    <div id="week1"><img src="images/bts/bts_overlay_weekly_prize_week1.png" alt="week prize"  /></div>
    <div id="week2" class="inactive_banner"><img src="images/bts/bts_overlay_weekly_prize_week2.png" alt="week prize"  /></div>
    <div id="week3" class="inactive_banner"><img src="images/bts/bts_overlay_weekly_prize_week3.png" alt="week prize"  /></div>
    <div id="week4" class="inactive_banner"><img src="images/bts/bts_overlay_weekly_prize_week4.png" alt="week prize"  /></div>
    <div id="week5" class="inactive_banner"><img src="images/bts/bts_overlay_weekly_prize_week5.png" alt="week prize"  /></div>
  </div>
  <div id="weeklyPrizeBlocksWrapper"><!--the outer vector box-->
    <ul id="weeklyPrizeBlockThumb">
      <li class="active"> <img src="images/bts/bts_overlay_wp_box_thumbw1_active.jpg" alt="Week1" id="week1" />
        <p class="text"> </p>
      </li>
      <li> <img src="images/bts/bts_overlay_wp_box_thumbw2_active.jpg" alt="Week2" id="week2" />
        <p class="text"> </p>
      </li>
      <li> <img src="images/bts/bts_overlay_wp_box_thumbw3_active.jpg" alt="Week3" id="week3" />
        <p class="text"> </p>
      </li>
    </ul>
    <ul id="weeklyPrizeBlockThumb">
      <li> <img src="images/bts/bts_overlay_wp_box_thumbw4_active.jpg" alt="Week4" id="week4" />
        <p class="text"> </p>
      </li>
      <li> <img src="images/bts/bts_overlay_wp_box_thumbw5_active.jpg" alt="Week5" id="week5" />
        <p class="text"> </p>
      </li>
    </ul>
    </ul>
  </div>

JavaScript:

 var currentID=$('div#weeklyPrizeActiveBlock').find('span').html();
   $('#weeklyPrizeImageBanner div').hide(); // Hide All Banner DIV's
   $('#weeklyPrizeImageBanner').find('div[id^='+currentID+']').show(); 
   $('ul#weeklyPrizeBlockThumb li').removeClass('active');
   $('ul#weeklyPrizeBlockThumb').find('li[id^='+currentID+']').addClass('active');
   var activePrize=$("div#weeklyPrizeActiveBlock").find('img[id^='+currentID+']').attr('src');
   $('ul#weeklyPrizeBlockThumb li').find('img[id^='+currentID+']').attr("src", activePrize);

    $('ul#weeklyPrizeBlockThumb li').click(function()
    {
    $('ul#weeklyPrizeBlockThumb li').removeClass('active'); //Remove Class Active from LI
        $(this).addClass('active'); //Active Image Thumb
        var imgID = $(this).find('img').attr('id'); //Find Thumb Image ID
        $('#weeklyPrizeImageBanner div').hide(); // Hide All Banner DIV's
        $('#weeklyPrizeImageBanner').find('div[id^='+imgID+']').show(); //Show Current Banner
        var activeSrc=$('div#weeklyPrizeActiveBlock').find('img[id^='+imgID+']').attr('src');

        $("div#weeklyPrizeInActiveBlock>img").each(function(index){
           var k= $(this).attr('src');
            index1="week"+index;
          $('ul#weeklyPrizeBlockThumb li').find('img[id^='+index1+']').attr('src',k);

        })
        $(this).find('img').attr("src", activeSrc);

    }
    );

То, что происходит, есть. JQuery не работает на втором наборе li с. Они не отвечают на щелчок. Это происходит только в IE7. Остальные браузеры работают абсолютно нормально.

РЕДАКТИРОВАТЬ: я пытался изменить идентификатор класса. но это все еще не сработало. Я попытался изменить имя второго идентификатора и перенастроить скрипт. Все еще не работал. Проблема лежит где-то еще.

Answer 1

Прежде всего, вы действительно должны исправить свою разметку, удалив эти дубликаты идентификаторов. Затем добавьте var к index1 = "week" + index;

Вот и все.

Подробнее о проблеме читайте здесь: http://ragrawal.wordpress.com/2007/10/25/top-5-reasons-why-ie7-is-complaining-about-your-javascript/

Answer 2

Ваш код использует один идентификатор для нескольких элементов. Это заставит браузер вести себя неопределенно. Пожалуйста, сделайте ваш HTML валидным , тогда он, вероятно, будет работать.