我正在尝试创建一个 eclipse 刻草图程序，并且我已经对所有内容进行了排序，传播网格，清除并重新创建网格。问题在于，用户输入的列数似乎被“保存”为一个类，并且网格的宽度增大。这个问题让我很头疼，因为行数似乎不受影响(行数是用户实际输入的)。
我正在使用 $("#wrapper").empty()，但该函数似乎并没有真正清除 html 中的所有内容。
这是我的 JavaScript 代码。
$(document).ready(function(){
/*JQuery variable*/
var $row = $("<div />", {class: 'row'});
var $box = $("<div />", {class: 'box'});
var $solid = $("<div />", {class: 'solid'});
/* Function for creating a grid given two attributes */
var gridCreate = function(input1, input2){
var rows = input1;
var columns = input2;
for(i = 0; i < rows; i++){
$row.append($box.clone());
};
for(i = 0; i < columns; i++){
$('#wrapper').append($row.clone());
};
$('.box').mouseenter(function(){
$(this).addClass('solid');
});
};
/* Initial grid with 16x16 */
gridCreate(16, 16);
/*Clear function*/
var clearGrid = function () {
$("#wrapper").empty();
};
/* The new grid function, propogated by a prompt
is not working BUGG. Possibly the system is storing the number of rows inputed from a previous grid */
var newGrid = function(){
var input1 = prompt('How many rows would you like to have (2-20)?');
var input2 = prompt('How many columns would you like?');
gridCreate(input1, input2);
}
/***********************Event handler*************************/
$('#clear').on('click', function(){
clearGrid();
newGrid();
});
});
这是 HTML:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Etch-a-Sketch</title>
<link rel="stylesheet" type="text/css" href="styles/easstyle.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="easscript.js"></script>
</head>
<body>
<h1>Andrew's Etch</h1>
<button id = "clear">Click here to reset</button>
<div id = "wrapper"></div>
最佳答案
我认为您需要克隆 $row 然后附加克隆的 $box。由于您在页面加载时添加的现有实现框被保留，因此要摆脱它，您需要在附加框之前使用 $row.clone() 。
var _row = $row.clone();
for (i = 0; i < rows; i++) {
_row.append($box.clone().text('Box ' + i)); //I have used text just for testing
};
for (i = 0; i < columns; i++) {
$('#wrapper').append(_row);
};
$(document).ready(function() {
/*JQuery variable*/
var $row = $("<div />", {
class: 'row'
});
var $box = $("<div />", {
class: 'box'
});
var $solid = $("<div />", {
class: 'solid'
});
/* Function for creating a grid given two attributes */
var gridCreate = function(input1, input2) {
var rows = input1;
var columns = input2;
var _row = $row.clone();
for (i = 0; i < rows; i++) {
_row.append($box.clone().text('Box ' + i));
};
for (i = 0; i < columns; i++) {
$('#wrapper').append(_row);
};
$('.box').mouseenter(function() {
$(this).addClass('solid');
});
};
/* Initial grid with 16x16 */
gridCreate(16, 16);
/*Clear function*/
var clearGrid = function() {
$("#wrapper").empty();
};
/* The new grid function, propogated by a prompt
is not working BUGG. Possibly the system is storing the number of rows inputed from a previous grid */
var newGrid = function() {
var input1 = prompt('How many rows would you like to have (2-20)?');
var input2 = prompt('How many columns would you like?');
gridCreate(input1, input2);
}
/***********************Event handler*************************/
$('#clear').on('click', function() {
clearGrid();
newGrid();
});
});.solid {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Andrew's Etch</h1>
<button id="clear">Click here to reset</button>
<div id="wrapper"></div>关于javascript - 空函数似乎从我的包装器中清除了一些类，但不是全部。试图找出问题所在，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36470244/