Question

我是编程新手，现在正在学习jquery。我必须制作简单的Etch-A-Sketch应用程序。我想在jsfiddle.net上创建它一切都好？但是当我输入我的网格的宽度和高度时，它做错了。示例：我输入10（宽度提示）和10（高度提示）但结果高度为20，宽度为15。这是我的jquery代码：

    $(document).ready(function(){
$('button').click(function(){
    var height = prompt("Enter your height (less than 64)");
    var width = prompt("Enter your width (less than 64)");
    if (height > 64){
        alert("You can't make height more than 64!");
    }
    if (width > 64){
        alert("You can't make width more than 64!");
    }
    for (i=0; i<height; i++){
        $('#container').append('<ul></ul>');
    }
    for (i=0; i<width; i++){
        $('ul').append('<li><li>');
    }
    $('li').hover(function(){
       $(this).css('background-color', 'red');
    });
});
});

这是html：

<body>
<quotes>Press the button to create your own Grid</quotes><br/>
<button>New Grid</button>
<div id = "container"></div>
</body>

这是CSS：

quotes{
margin-left: 25px;
margin-top: 10px;
}
button{
margin-left: 130px;
margin-top: 4px;
}
ul{
margin: auto;
padding: auto;
}
 ul li{

list-style: none;
display: inline-block;
height: 20px;
width:30px;
border: 1px solid black;
 }

它工作但是方向错误。我的错误在哪里？请帮助我理解它。感谢您的关注

Answer 1

您的代码未按预期运行，因为您没有关闭HTMLString中的<li>：

$('ul').append('<li><li>');

因此jQuery将创建两个<li>并在每次迭代时将其附加到所有现有的<ul>

应为$('ul').append('<li></li>');或$('ul').append('<li>');或$('ul').append($('<li/>'));

您可以创建网格，如下所示：

$(document).ready(function () {
        $('button').click(function () {
            var height = prompt("Enter your height (less than 64)");
            var width = prompt("Enter your width (less than 64)");
            if (height > 64) {
                alert("You can't make height more than 64!");
                return;
            }
            if (width > 64) {
                alert("You can't make width more than 64!");
                return;
            }
            for (i = 0; i < height; i++) { // iterate n number of times according to height
               // upon each iteration create one ul
                $("<ul/>").appendTo('#container')
               // create n number of li according to width and append them to the ul
                          .append(new Array(parseInt(width)+1).join("<li></li>"));
            }
            $('li').hover(function () {
                $(this).css('background-color', 'red');
            });
        });
    });

quotes {
    margin-left: 25px;
    margin-top: 10px;
}
button {
    margin-left: 130px;
    margin-top: 4px;
}
ul {
    margin: auto;
    padding: auto;
}
ul li {
    list-style: none;
    display: inline-block;
    height: 20px;
    width:30px;
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<quotes>Press the button to create your own Grid</quotes>
<br/>
<button>New Grid</button>
<div id="container"></div>

Answer 2

这是我对这段代码的直觉（如果/当提供JSFiddle链接时，我将编辑我的帖子）。我想你想要一个嵌套的for循环，这样你就可以在右li标签内添加ul元素：

for (var i = 0; i < height; i++) {
    // create the row
    var $ul = $('<ul></ul>');

    // add column elements
    for (var j = 0; j < width; j++) {
        $ul.append('<li></li>');
    }

    // append the row to the container
    $('#container').append($ul);
}

Here is a JSFiddle显示代码正在运行。

修改

如果要清除网格，您只需删除#container中的子元素即可。查看the revised JSFiddle here。

var elements = $('#container ul'); elements.remove();

jquery工作不正常或我是个傻瓜

2 个答案: