Javascript while循环不在IE8中呈现html

编辑：（参见下面的答案）

我一直是stackoverflow的观众，但我今天的第一个问题是，因为我在任何地方都找不到答案。。。我的javascript代码有一个奇怪的行为。我尝试了很多不同的方法，但始终无法解决问题。我想要的是当我点击一个按钮时折叠和展开一些元素。。。通常情况下，这将是简单的，它的工作在铬，但不是在IE8

• 没有错误消息
• 他进入循环，但没有类或切换到我的元素
• 以下是我的javascript代码：

  function collapseClick(obj) {
    var group = $(obj).attr('data-maingroup');
    console.log("collapseClick on group:" + group);
    console.log("obj class before:" + $(obj).attr('class'));
  
  
    if ($(obj).hasClass("toggleExpand")) {
      $(obj).addClass("toggleMinus");
      $(obj).removeClass("toggleExpand");
  
    } else {
      $(obj).removeClass("toggleMinus");
      $(obj).addClass("toggleExpand");
    }
    console.log("obj class after:" + $(obj).attr('class'));
  
  
  $('div[data-group="' + group + '"]').each(function (index, item) {
       console.log("div loop for group:" + group + " index:" + index);
       $(this).toggle();
   });
  

  }

以下是呈现的我的Html：

<div id="chart">
   <div class="leftPart">
     <div class="header">name</div>
     <div class="item parent">
       <a id="collapse_Integrated_Planning" onclick="collapseClick(this);return false;" style="float:left;" class="leftcollapse toggleMinus" data-maingroup="Integrated Planning"></a>Integrated Planning
     </div>
    <div class="item child gantShow" data-group="Integrated Planning">John Smith</div>
    <div class="item child gantShow" data-group="Integrated Planning">Alex Smith</div>    
  </div>
  <div class="gantMainControl" id="gantControl">
     <div class="header">
        <div class="headerRow"> 
           <div class="headerRowYear" id="headerYear">
               <div class="headerCellYear" style="width:1499.5983985355874px">2013</div>
          </div>
        </div>
   <div class="headerRow">
       <div class="headerCellMonth" style="width:126.42890508110469px">January</div>   
       <div class="headerCellMonth" style="width:114.1938497506752px">February</div>
       <div class="headerCellMonth" style="width:126.42890508110469px">March</div>
       <div class="headerCellMonth" style="width:122.35055330429486px">April</div><div class="headerCellMonth" style="width:126.42890508110469px">May</div>
       <div class="headerCellMonth" style="width:122.35055330429486px">June</div>
       <div class="headerCellMonth" style="width:126.42890508110469px">July</div><div class="headerCellMonth" style="width:126.42890508110469px">August</div>
       <div class="headerCellMonth" style="width:122.35055330429486px">September</div>
       <div class="headerCellMonth" style="width:126.42890508110469px">October</div>
       <div class="headerCellMonth" style="width:122.35055330429486px">November</div>
       <div class="headerCellMonth" style="width:126.42890508110469px">December</div>
   </div>
 </div>
 <div class="container">
     <div class="timelineContainer" style="width: 1503px;"></div>
 </div>
 <div class="container gantShow" data-group="Integrated Planning">
     <div class="timelineContainer child" style="width: 1503px;">
        <div class="timeline" style="width:722.9598440425635px;margin-left:772.560202716214px" title="2013/07/08 - 2013/12/31&lt;br&gt;&lt;/div&gt;Integrated Planning" onclick="onTimelineClick(this)" data-id="159c5c97-c135-4906-970c-e4d58f647c41" data-startdate="2013/07/08">100%</div>
        </div>
     </div>
 <div class="container gantShow" data-group="Integrated Planning">
     <div class="timelineContainer child" style="width: 1503px;">
         <div class="timeline" style="width:949.2691917671041px;margin-left:546.2508549916735px" title="2013/05/14 - 2013/12/31&lt;br&gt;&lt;/div&gt;Integrated Planning" onclick="onTimelineClick(this)" data-id="5c3756b1-0674-4bfc-b6ce-fa765db63eed" data-startdate="2013/05/14">100%</div>
     </div>
 </div>

)

此函数正在重新生成我的图形

• 更改css值时，Chrome不会调用resize事件
• 但是当你在IE中更改css值时，IE会重新调整大小，所以我的图形总是重新渲染

希望能对未来有所帮助！

---

-杰夫

我找到了我问题的答案

问题与Chrome和IE如何处理

resize

事件有关

我有另一个JavaScript函数，在调整浏览器大小时调用：

$(window).resize(function () {
     console.log("resize");
     //magic formula to know how many pixel is entering in the screen for the chart
     config.zoomLevel = ($(window).width() - 200) / 421.739;
     createGantControl(('#' + mainControlId), config);
});

此函数正在重新生成我的图形

• 更改CSS值时，Chrome不会调用

  resize

  事件
• 但是当你在IE中更改CSS值时，IE会调用

  resize

  事件，所以我的图形总是被重新渲染

---

如果需要帮助，请缩进html。您使用哪个版本的jquery？jquery 2.x不支持IE8，您必须安装1.10。事实上，我使用的是1.9版，它与jquery无关。如果您有解决方案，请将其作为以下答案发布，而不是编辑问题。然后将你的答案标记为“已接受”。这将帮助其他人谁可能正在寻找类似的问题。我不能我的帐户是新的。。。我得等8个小时。。。当我有能力的时候，我会发布一个答案。

$(window).resize(function () {
     console.log("resize");
     //magic formula to know how many pixel is entering in the screen for the chart
     config.zoomLevel = ($(window).width() - 200) / 421.739;
     createGantControl(('#' + mainControlId), config);
});