Javascript while循环未在IE8中呈现html
Javascript while loop not rendering html in IE8
编辑:(见下面的回答)
我一直是stackoverflow的长期观众,但我今天的第一个问题是,我在任何地方都没有找到任何答案。。。我的javascript代码有一个奇怪的行为。我尝试了很多不同的方法,但始终没能纠正这个问题。我想要的是当我点击一个按钮时折叠和展开一些元素。。。通常情况下,它会很简单,可以在Chrome中工作,但不能在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<br></div>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<br></div>Integrated Planning" onclick="onTimelineClick(this)" data-id="5c3756b1-0674-4bfc-b6ce-fa765db63eed" data-startdate="2013/05/14">100%</div>
</div>
</div>
这是我的控制台日志:
日志:collapse单击组:集成规划
日志:obj class before:leftcollapse toggleMinus
日志:obj类after:leftcollapse切换展开
日志:组的div循环:集成规划索引:0
日志:组的div循环:集成规划索引:1
日志:组的div循环:集成规划索引:2
日志:组的div循环:集成规划索引:3
我真的需要帮助这个IE8的问题开始困扰我很多。。。
答案:
我已经找到了问题的答案。
这个问题与chrome和IE如何处理调整大小事件有关。
我有另一个javascript函数,它是在调整浏览器大小时调用的(
$(window).resize(function () {
console.log("resize");
config.zoomLevel = ($(window).width() - 200) / 421.739; //magic formula to know how many pixel is entering in the screen for the chart.
createGantControl(('#' + mainControlId), config);
});
)。
这个函数正在重新生成我的图形。
- 当您更改css值时,Chrome不会调用resize事件
- 但是当你在IE中更改css值时,IE会重新调整大小,所以我的图总是被重新绘制
希望它能在未来有所帮助!
-Jeff
我找到了问题的答案。
该问题与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
事件,所以我的图总是被重新绘制
相关文章:
- 仅IE8 html文本框中的字符
- 显示隐藏的html表在javascript(IE8)中不起作用
- 如果我添加 pageX 页面 Y 在 IE8 中不起作用<!文档类型 html>.
- HTML代码在firefox11.0中运行良好,但在IE8中则不然
- 在IE8中创建元素内部HTML错误
- IE8 问题 - jQuery 调整页面大小时导航 html
- Bing Map 上的 HTML 框无法在 IE8 或 Firefox 中正确查看
- HTML Web 浏览器兼容性(IE8、Chrome)
- 使用 $.get() 检索本地 HTML 在 IE8 中不起作用
- 在jQuery中创建一个带有属性的HTML元素,在ie7和ie8中失败
- Javascript while循环未在IE8中呈现html
- 带有jquery.form.js的ie8和ie9返回html,而不是来自PHP的数据echo
- 显示和隐藏经过验证和简化的ie8-html
- 'HTML元素'在IE8中未定义
- 打开一个小的弹出窗口,在ie8上点击显示html内容.并非所有内容都能在窗口中看到
- IE8 iframe将简单的文本文件呈现为HTML,我需要原始代码
- HTML散列问题- IE8
- 使用html命令设置html内容.innerHTML,使其在ie8和ie9中工作
- 带有display的嵌套HTML元素:none在IE8中不起作用
- IE8使用jQuery .html()时会追加