我正在尝试仅使用 javascript 将随机对象放置在动态网格中。我被困在如何在网格中放置随机对象/图像。类似扫雷的东西，但寻找简单的例子来开始。
这是我关注的帖子的链接Creating a dynamic grid of divs with Javascript
代码如下:
<html><head>
<script language="javascript">
function genDivs(v){
var e = document.body; // whatever you want to append the rows to:
for(var i = 0; i < v; i++){
var row = document.createElement("div");
row.className = "row";
for(var x = 1; x <= v; x++){
var cell = document.createElement("div");
cell.className = "gridsquare";
cell.innerText = (i * v) + x;
row.appendChild(cell);
}
e.appendChild(row);
}
document.getElementById("code").innerText = e.innerHTML;
}
</script>
</head>
<body>
<input type="button" onclick="genDivs(6)" value="click me">
<code id="code"></code>
</body>
</html>
最佳答案
这是一个工作版本:
<style>
.row { width: 100%; clear: both; text-align: center; }
.col { display: inline-block; min-height: 20px; min-width: 20px; padding: 8px 10px; background-color: #ededed; margin: 1px; }
.col:hover { background-color: #333333; color: #ffffff; }
</style>
<input type="button" onClick="genDivs(6);" value="click me" />
<div id="target"></div>
<script language="javascript">
function genDivs(rows,cols){
var e = document.getElementById("target");
cols = cols || rows;
for(var r = 0; r < rows; r++) {
var row = document.createElement("div");
row.className = "row";
for(var c = 0; c < cols; c++) {
var col = document.createElement("div");
col.className = "col";
col.innerHTML = (r * rows) + c;
col.innerHTML = getElement();
row.appendChild(col);
}
e.appendChild(row);
}
}
function getElement(){
var elements = [
"A",
"B",
"C"
]
return elements[Math.floor(Math.random() * (elements.length))];
}
</script>
使用 jQuery 会更容易。我用的是普通的 Javacript。我通常会将 onclick 放在 JavaScript 中，但我将其保留为原样。
这是一个jsfiddle: https://jsfiddle.net/mckinleymedia/chLLg4rr/
希望这有帮助。
<小时/>根据请求，我制作了一个 jQuery 版本。我还使用了 lodash 来提高效率(lodash 真的很方便)。我已经更正确地分离了脚本、html 和样式 - 这些应该分别放在不同的文件中。这是一个jsfiddle: https://jsfiddle.net/mckinleymedia/btb9vp26/
脚本:
function grid(rows,cols,target){
cols = cols || rows;
target = target || "grid";
var gridDiv = $("." + target);
gridDiv.html(''); // clear grid to reload
_.times(rows, function() {
gridDiv
.each(function(){ // allows multiple grids
$(this).append(addRows(rows,cols));
});
});
};
function addRows(rows,cols){
return $("<div />")
.addClass("row")
.html(
addCols(cols)
);
};
function addCols(cols){
return _.times(cols, function() {
return $("<div />")
.addClass("col")
.html( getElement() );
});
};
function getElement(){
var elements = [
"A",
"B",
"C"
];
return _.sample(elements);
};
$(".js-grid").click( function(){ grid(6,10) } );
$(".js-grid2").click( function(){ grid(3,5,'grid2') } );
html:
<button type="btn btn-info" class="js-grid">Click me</button>
<button type="btn btn-info" class="js-grid">Or me</button>
<button type="btn btn-info" class="js-grid2">Grid 2</button>
<div class="grid"></div><div class="grid2"></div>
<div class="grid"></div>
样式:
.row { width: 100%; clear: both; text-align: center; }
.col { display: inline-block; min-height: 20px; min-width: 20px; padding: 8px 10px; background-color: #ededed; margin: 1px; }
.col:hover { background-color: #333333; color: #ffffff; }
.grid, .grid2 { margin-bottom: 10px; }
关于Javascript 将随机对象/图像放置在网格中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33585093/