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上。其他浏览器工作正常。

编辑：我尝试将id更改为class。但它仍然无效。我尝试更改第二个ID的名称并重新配置脚本。仍然没有奏效。问题出在其他地方。

Answer 1

首先，你真的应该通过删除那些重复的ID来纠正你的标记。然后将var添加到index1 = "week" + index;

就是这样。

在此处查看有关此问题的更多信息：http://ragrawal.wordpress.com/2007/10/25/top-5-reasons-why-ie7-is-complaining-about-your-javascript/

Answer 2

您的代码在多个元素上使用一个ID。 This将使浏览器的行为未定义。请制作您的HTML validate，然后它可能会有效。

Jquery在IE7上崩溃

2 个答案: