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

Question

我试图像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>

Answer 1

您使用变量i作为循环计数器，并在循环内部。

在第一次迭代中，将值"3"赋给变量i 。 当在for语句中进行比较时，它将被转换为数字3 ，并且因为它大于数组的长度，所以循环在第一次迭代之后结束。

对包含循环中data-id的变量使用不同的变量名。

---

编辑：

iframe大小的问题在于：

o.iframe.height = w + 100;

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

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

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

Answer 2

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

newNameForVar = e.attributes['data-id'].value;