gpt4 book ai didi

javascript - 空函数似乎从我的包装器中清除了一些类,但不是全部。试图找出问题所在

转载 作者:行者123 更新时间:2023-12-03 07:14:57 28 4
gpt4 key购买 nike

我正在尝试创建一个 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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com