如何添加新行/列
How to Add New Row/Column
我正在开发一款游戏,遇到了一些麻烦。我想做的是,一旦所有的块都变成紫色,我想创建一个新的行和列。我试图通过在所有块都是紫色之后删除所有块来实现这一点,然后使用变量rowVal比上次多创建一行和一列。我一直在研究JSFIddle,链接是http://jsfiddle.net/jaredasch1/6dhc240q/.我会把代码贴在下面,这样你就可以快速查看
HTML
<!DOCTYPE html>
<body>
<div id="button" class="on hover"></div>
<br>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<br>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<br>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<br>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
</body>
CSS
.block {
height:100px;
width:100px;
border-radius:10px;
display:inline-block;
background-color:#33CCFF;
}
#button {
height:100px;
width:410px;
border-radius:10px;
display:inline-block;
background-color:#FF6666;
margin-bottom:10px;
}
.on {
background-color:#D633FF;
}
JavaScript/jQuery
var main = function () {
var rowVal = 5;
var setUp = function () {
for (var i = 0; i < rowVal; i++) {
$("#button").append("<br>");
}
for (var k = 0; k < rowVal; k++) {
$("<br>").append("<div class='"block hover'"></div>");
}
rowVal++;
};
var checkAll = function () {
var allDivs = $("div.block");
var classedDivs = $("div.block.on");
var allDivsHaveClass = (allDivs.length === classedDivs.length);
if (allDivsHaveClass) {
allDivs.remove(".on");
setUp();
}
};
$("div").mouseenter(function () {
$(this).fadeTo("slow", 0.25);
$(this).css('cursor', 'pointer');
});
$("div").mouseleave(function () {
$(this).fadeTo("slow", 1);
$(this).css('cursor', 'default');
});
$(".block").click(function () {
$(this).toggleClass("on");
$(this).prev().toggleClass("on");
$(this).nextAll().eq(4).toggleClass("on");
$(this).next().toggleClass("on");
$(this).prevAll().eq(4).toggleClass("on");
checkAll();
});
$("#button").click(function () {
$(".block").removeClass("on");
});
$(document).keydown(function (key) {
if (event.which === 32) {
$(".block").removeClass("on");
}
});
};
$(document).ready(main);
我愿意接受建议,所以请回答!
在checkAll()中,添加以下内容:
$("body").append('<br><div class="block hover"></div>');
只需将每一行放入带有class行的div中,然后执行以下操作:
var setUp = function () {
$('.row').each(function(){
$(this).prepend('<div class="block hover"></div>'); // add one more block to existing rows
})
$('body').append($('.row:eq(0)').clone()) // add one row
};
以下是完整的jsfiddle:http://jsfiddle.net/juvian/6dhc240q/1/
一个小建议是正确地构建HTML,比如
<!DOCTYPE html>
<body>
<div id="button" class="on hover"></div>
<div class="row">
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
</div>
<div class="row">
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
</div>
<div class="row">
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
</div>
<div class="row">
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
</div>
<div class="row">
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
</div>
</body>
然后要附加新列,可以使用
$('.row').each(function(){$(this).append('<div class="block hover"></div>');})
要添加新行,只需克隆行
$('body').append($($('.row')[0]).clone())
然后$('.row').length将给出行数,$($('.row')[0]).lengage将给出列数
相关文章:
- 拆分文本以每隔n个字符添加一行新行,并注意空格
- 如何在脚本上添加新行
- 在不刷新整个网格的情况下,向Asp.net网格视图添加新行
- dhtmlx添加新行并启动单元格编辑器
- 在新行(html)中动态添加更多文本字段
- 如何在Google Geochart图表的工具提示文本中添加新行
- 为什么要将此p标记添加为新行
- Jquery在表WITH函数中追加新行后添加单击事件
- 无法编辑添加的新行
- 如何在javascript中每次添加新行时都增加ordre值
- 将新行添加到localStorage变量中
- 当上一行/当前行被填充时,将新行添加到HTML表中
- 当新行添加到表中时,使用AJAX更新页面
- 将新行添加到数据库时的 Javascript 警报
- 为 HTML 文本区域中的新行添加效果
- 将新行添加到空的剑道网格中
- 单击按钮时,将新行添加到包含下拉列表的表中
- 向输出空间或新行添加新行或空格
- 使用2下拉列表将新行添加到表中-如何更改选择的名称
- 为按钮创建的每个新行添加i++