繁体   English   中英

如何根据用户输入调整嵌套div的大小

[英]How to make nested divs resize based on user input

我正在执行The Odin Project中的一个项目。 基本上是这样

这是代码:

HTML

<!DOCTYPE html>

<html>

<head>
    <script src="js/jQuery.js"></script>
    <link type="text/css" rel="stylesheet" href="css/sketch.css">
    <script src="js/sketch.js"></script>
</head>

<body>
<div class="grid_controls">
    <button class="clear">Clear</button>
</div>
<div class="container">
</div>
</body>

</html>

CSS

/*=================
General
=================*/

body {
    background: aqua;
}

/*=================
Sketchpad Holder
=================*/
.container {
    width: 500px;
    height: 400px;
    background-color: orange;
    overflow: hidden;
    margin: auto;
    position: relative;
    top: 20px;
}

.box {
    width: 16px;
    height: 16px;
    background: yellow;
    display: inline-block;
    margin: 1px 1px 1px 1px;
    left: 0.5%;
    right: auto;
    position: relative;
}


.clear {
    position: relative;
    margin: auto;
    text-align: center;
}

使用Javascript / jQuery的

var default_grid_num = 435;
var div_limit = prompt("How large would you like your grid to be?");
var button_prompt = "Would you like to redraw the grids?";
/*var div_limit = prompt("number")*/
$(document).ready(function() {

for(var i = 1; i <= div_limit; i++)
    $(".container").append("<div class='box'></div>");

$(".container > div").hover(function() {
    $(this).css("background-color", "red");
});

$("button").click(function() {
    $(".box").fadeOut();
    if(confirm("Would you like to redraw the grid?")); 
    {
        boxes_per_row = prompt("Define width of grid.");
    }
});


});

我想要做的就是让用户输入( .div_limit )和调整的div( .box基于用户输入() .div_limit )因此,如果用户只在一个数字输入,一个DIV会占据整个容器框。

这是到目前为止我所拥有的: http : //codepen.io/zappdapper/full/epdPKb/

我知道我可以做到,但是如何?

我做了一个jsfiddle ,它使用mod运算符%和一些数学运算来确定盒子的百分比。

我还包括了max_per_row来确定应连续显示多少个。

UPDATE

我再次查看了您的示例和您的评论,并提出了以下建议:

http://jsfiddle.net/xw4cbo5n/

我对示例进行了略微的编辑,以便不问两个问题,而是只问一个问题:“每行网格有多少个盒子”(这与您的示例相似)。

然后继续绘制网格,其中每行包含该数字并相应地设置每个弓的宽度和高度。 我还稍微修改了CSS样式。

这更接近您的需求吗?


我创建了一个JSFiddle,它在运行时显示两个提示:

1)您要几盒?

2)一行应容纳多少盒?

http://jsfiddle.net/5vg6n232/

给出响应后,将绘制网格。

我已经稍微编辑了CSS,但是主要功能是由几个功能驱动的:

function drawBoxes(){

请注意在div上向页面添加正确的数字。 完成此操作后,它将调用:

function restyle(numberofBoxesPerRow){

只需根据用户指定的每行框数来重置每个框的CSS宽度即可。

这回答了你的问题了吗?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM