Question

我试图显示带有个人ID的div网格。

我发现当宽度值超过10时，网格开始创建一些奇怪的图案，有些线条延伸超出宽度值，有些线条折叠太快。

使用

创建单元格ID时

cellId = x.toString() + "/" + y.toString();

一切似乎都没问题。

那是什么

+ "/" +

变化？只是简单地将字符串添加到cellId？

我发布完整的代码，1）因为它的简短2）以确保问题不在css内。

<head>

    <style type = "text/css">

        .pixel {
            font-size:12px;
            font-family: sans-serif;
            float:left;
            width:20px;
            height:20px;
        }


    </style>

    <script type = "text/javascript">

    </script>        

</head>

<body>

    <script type="text/javascript">

   function drawBoard(height, width) {

       for (x=0; x<=height; x++) {

            for (y=0; y<=width; y++) {

                cell = document.createElement('div');  
            //    cellId = x.toString() + "/" + y.toString();
                cellId = x.toString() + y.toString();
                cell.setAttribute("id", cellId);
                document.body.appendChild(cell);
                document.getElementById(cellId).setAttribute("class", "pixel");
                if (y == 0) {
                    document.getElementById(cellId).style.clear = "both";
                    console.log(y);
                }

                document.getElementById(cellId).innerHTML = cellId;
            }

       }

   }

        drawBoard(18, 10);

    </script>


</body>

Answer 1

您的ID值由粘在一起的两个数字组成。如果x为8且y为32，则最终为832.但是，当x为83且y为2时，您也以832结束。

您的代码正在创建具有重复ID值的元素，这就是问题的核心。在中间使用“/”字符解决它。现在，在上面描述的情况下，你会得到“8/32”和“83/2”。

当然，你可以使用除“/”之外的任何其他角色。

为什么这个网格取决于不相关的变量？

1 个答案: