循环遍历 3 个元素时的无限循环.怎么了

Infinite loop when looping through 3 elements. Whats wrong?

本文关键字：无限循环 怎么了 元素 遍历 循环      更新时间：2023-09-26

我试图创建一些"插件"，如Facebook喜欢按钮。但是，我的循环只渲染第一个div，而不是其他div。 为什么？

JSFiddle

    <style>body{background: #ccc;}</style>
<div name="q" data-id="3"  data-width="200"></div>
<div name="q" data-id="1"  data-width="300"></div>
<div name="q" data-id="1"  data-width="400"></div>
<script>
    var s = document.getElementsByName("q");
    for (var i = 0; i < s.length; i++) {
        e = s[i];
        w = e.attributes['data-width'].value; 
        i = e.attributes['data-id'].value;
        var o={};
        o.iframe = document.createElement('iframe');
        o.iframe.setAttribute('src', 'http://resources2.news.com.au/images/2012/09/27/1226482/758034-tardar-sauce-the-cat.jpg');
        o.iframe.width = w;
        o.iframe.height = w + 100;
        o.iframe.border = 0;
        o.iframe.setAttribute('style', 'border: 0;overflow: visible;');
        e.appendChild(o.iframe);
        console.log('id:'+i+' width:'+w);
    }   
</script>

您将变量i用作循环计数器和循环内部。

在第一次迭代中，将值"3"分配给变量 i 。在 for 语句中进行比较时，这将转换为数字3，并且由于该长度大于数组的长度，因此循环在第一次迭代后结束。

对在循环中保存数据 ID 的变量使用不同的变量名称。

<小时 />

编辑：

iframe大小的问题在这里：

o.iframe.height = w + 100;

变量 w 包含一个字符串，例如 "200" ，当 + 运算符的任何操作数是字符串时，它将执行字符串连接。所以结果不是300而是"200100".您的 iframe 有几千像素高。

您需要在计算中使用数字：

o.iframe.height = parseInt(w) + 100;

i正在循环中修改。在循环中更改此声明的名称：

newNameForVar = e.attributes['data-id'].value;
相关文章：