Question

我想创建一个任意大小的网格，每个网格中都有一个绿色按钮。如果我点击其中一个绿色按钮，它应该变成红色，如果它已经是红色，那么我希望它变回绿色。显然点击一个方格应该只会使它变成绿色/红色而不影响任何其他方格。

现在，我能够创建一个任意大小的网格，但问题是，无论出于何种原因，网格中的每个方块都以红色开始（当它们应该以绿色开始时）以及当我点击任何方格时什么都没发生。

我将在下面提供我的代码。现在，我正在使用双循环创建一些嵌套div（出于格式化原因）然后我在绿色方块的嵌套div中添加一个图像。

非常感谢任何帮助，如果您需要任何澄清，请随时告诉我们！：）

Javascript代码：

function changeSquare(inputImage) {
    var image = document.getElementById(inputImage);

    // If image is currently green square, change to red, and vice versa
    if (image.src.match("http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png")) {
        image.src = "http://www.clker.com/cliparts/1/J/s/o/7/y/red-square-button-md.png";
    } else {
        image.src = "http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png";
    }
};

function printInfo(inputImage) {
    document.getElementById("info").innerHTML = "Info:" + inputImage + "<br /> <br /> <br />";
};

//Creates a grid of dimensions width by height
function makeGrid(height, width) {

    // Loop over height and width to create black square objects with
    // buttons in middle
    for (i = 0; i < height; i++) {
        for (j = 0; j < width; j++) {

            // Outer div is black square
            var div = document.createElement("div");
            div.className = "square";
            div.id = ("div").concat(i,",", j);

            var innerDiv0 = document.createElement("div");
            innerDiv0.className = "content";
            div.id = ("innerDiv0").concat(i,",", j);
            div.appendChild(innerDiv0);

            // InnerDiv1 & 2 are table structures (necessary for alignment)
            var innerDiv1 = document.createElement("div");
            innerDiv1.className = "table";
            div.id = ("innerDiv1").concat(i,",", j);
            innerDiv0.appendChild(innerDiv1);

            var innerDiv2 = document.createElement("div");
            innerDiv2.className = "table-cell";
            div.id = ("innerDiv2").concat(i,",", j);
            innerDiv1.appendChild(innerDiv2);

            // Add green square image
            var image = document.createElement("img");
            image.id = ("image").concat(i,",", j);
            image.src = "http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png"; 
            image.className = "rs";
            innerDiv2.appendChild(image);
            document.body.appendChild(div);

            // Add onclick feature. I've tried using different methods
            // and putting it above the appendChild line, but nothing seems
            // to work.
            image.onclick = changeSquare(image.id);
        }
    }
};

makeGrid(20, 20);

CSS：

.square {
    float:left;
    position: relative;
    width: 5%;
    padding-bottom: 2.8125%;
    background-color:#1E1E1E;
    overflow:hidden;
    outline: 1px solid #FFFFFF;
}

/*
 Aspect ratio  |  padding-bottom  |  for 30% width
------------------------------------------------
    1:1        |  = width         |    30%
    1:2        |  width x 2       |    60%
    2:1        |  width x 0.5     |    15%
    4:3        |  width x 0.75    |    22.5%
    16:9       |  width x 0.5625  |    16.875%
    */

.content {
    position:absolute;
    height:40%;
    width:47%;
    padding: 5% 26.5%;
    text-align:center;
}

.content .rs{
    width:auto;
    height:auto;
    max-height:90%;
    max-width:100%;
}

.table{
    display:table;
    height:100%;
    width:100%;
}

.table-cell{
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;
}

body {
    font-size:20px;
    font-family: 'Lato',verdana, sans-serif;
    color: #000000;
    background:#ECECEC;
}

.numbers{
    font-weight:900;
    font-size:100px;
}

HTML：

<head>
  <link rel="stylesheet" type="text/css" href="GridTest.css">
</head>

<body>

    <div id="info"> hello
    </div>

    <script src="GridTest.js"></script>

</body>

我想要做的事情的图片：

Answer 1

这是一个工作小提琴：JSFiddle

唯一的变化是a）从您向图像添加onclick事件的行中删除(image.id)，以及b）更新changeSquare方法以获取调用者的ID（{ {1}}）而不是期望传递给它（this.id）。

Answer 2

当我看到这个时，我想知道，为什么不在css中使用上下班，并将这些按钮的图像作为背景。这可以节省您的大量额外的JavaScript操作。我推荐在这个btw中使用jQuery。

现在完成后，为div添加一个onclick效果，并使其切换自身的开启和关闭类。

JavaScript可点击网格

2 个答案: