Question

我试图制作一个可以通过一些javascript代码控制的网格。

StringBuilder

它的5x3表格，每个单元格包含＆＃39; 1＆＃39;目前。我希望类名<div id="blockFrame"> <div id="blockGrid"> <div class="block 0-0">1</div> <div class="block 0-1">1</div> <div class="block 0-2">1</div> <div class="block 1-0">1</div> <div class="block 1-1">1</div> <div class="block 1-2">1</div> <div class="block 2-0">1</div> <div class="block 2-1">1</div> <div class="block 2-2">1</div> <div class="block 3-0">1</div> <div class="block 3-1">1</div> <div class="block 3-2">1</div> <div class="block 4-0">1</div> <div class="block 4-1">1</div> <div class="block 4-2">1</div> </div> </div>的所有div都具有一定的大小，因此我编写了此代码，保存为外部js文件并使页面加载文件。它奏效了。

block

问题出在那个旨在定位“块”的部分。到某个地方。下面的代码是在同一个外部js文件中编写的，但它没有完成这项工作。

var blockSize = document.getElementsByClassName("block");
for (i=0; i<blockSize.length; i++) {
    blockSize[i].style.width='2.85em';
    blockSize[i].style.height='2.85em';
    blockSize[i].style.position='absolute';
}

变量for (i=0; i<chunkWidth; i++) for (j=0; j<10*5/chunkWidth; j++) { eval("document.getElementsByClassName('"+i+"-"+j+"')[0].style.bottom='"+(3.25*5/chunkWidth*j)+"em';") eval("document.getElementsByClassName('"+i+"-"+j+"')[0].style.left='"+(3.25*5/chunkWidth*i)+"em';") }在页面将加载的另一个外部js文件中定义，并且它是一个数字。加载页面时出现此错误。

TypeError：document.getElementsByClassName（...）[0]未定义

如果我在浏览器控制台中逐行放置eval代码，它会起作用，但这不是我的意思（虽然它只适用于加载页面后创建的div，通过将appendChild写入控制台，不适用于加载页面的div。）

我该怎么做才能使这个外部js文件对页面和页面中的所有div进行更改，所以我安排了块？

Answer 1

尝试使用\转义第一个数字。

eval("document.getElementsByClassName('\\"+i+"-"+j+"')[0].style.bottom='"+(3.25*5/chunkWidth*j)+"em';")
eval("document.getElementsByClassName('\\"+i+"-"+j+"')[0].style.left='"+(3.25*5/chunkWidth*i)+"em';")

http://forums.mozillazine.org/viewtopic.php?f=9&t=277768

Answer 2

你的代码中有几个问题：

第一个问题在于计算：

for (var i=0; i<chunkWidth; i++) {
    for (j=0; j<10*5/chunkWidth; j++) {

从html我们可以看到max i === 4，max j === 2

如果chunkWidth为1 - max i = 0且max j = 49 - 非法
如果chunkWidth为2 - max i = 1且max j = 24 - illegal
如果chunkWidth为3 - max i = 2且max j = 15 - illegal
如果chunkWidth为4 - max i = 3且max j = 12 - illegal
如果chunkWidth为5 - max i = 4且max j = 10 - illegal
超过5 i＆lt; 5 - 非法

类名应以_ / - / a-z / A-Z开头，因此将编号类更改为block0-1，依此类推。

<div id="blockFrame">
    <div id="blockGrid">
        <div class="block block0-0">1</div>
        <div class="block block0-1">1</div>
        <div class="block block0-2">1</div>
        <div class="block block1-0">1</div>
        <div class="block block1-1">1</div>
        <div class="block block1-2">1</div>
        <div class="block block2-0">1</div>
        <div class="block block2-1">1</div>
        <div class="block block2-2">1</div>
        <div class="block block3-0">1</div>
        <div class="block block3-1">1</div>
        <div class="block block3-2">1</div>
        <div class="block block4-0">1</div>
        <div class="block block4-1">1</div>
        <div class="block block4-2">1</div>
    </div>
</div>

您使用脚本完成所有工作，而不是使用css。所以不是这个块：

var blockSize = document.getElementsByClassName("block");
for (i=0; i<blockSize.length; i++) {
    blockSize[i].style.width='2.85em';
    blockSize[i].style.height='2.85em';
    blockSize[i].style.position='absolute';
}

只需使用此css：

.block {
    position: absolute;
    height: 2.85em;
    width: 2.85em;
}

当您可以连接字符串以获取所需的className - "block"+i+"-"+j时，可以使用eval。请改用此代码块：

var block;

for (var i=0; i<chunkWidth; i++) {
    for (j=0; j<10*5/chunkWidth; j++) {
        block = document.getElementsByClassName("block"+i+"-"+j)[0];
        console.log("block"+i+"-"+j);
        block.style.bottom = 3.25*5/chunkWidth*j+"em";
        block.style.left = 3.25*5/chunkWidth*i+"em";
    }
}

你应该等待'直到元素被渲染，所以把外部脚本引用放在正文的末尾，或者使用这个

document.addEventListener("DOMContentLoaded", function(event) { 
  // your code
});

我想通过加载外部.js来更改具有相同类名的元素的样式

2 个答案: