Question

我正在为Etch-A-Sketch-Pad程序编写代码。 Pad是一个容器div（#container），里面有一个div（.unit）网格。每个.unit元素总共为12px乘12px（包括保证金）。 #container的大小取决于.unit网格的大小。例如，如果网格的宽度为3，则＃container的宽度应为3 * 12 = 36px。当鼠标悬停时，每个.unit元素也应永久变黑。

以下是我遇到的问题：

在createGrid函数的第29-32行中，没有创建#container的维度。因此，.unit网格不会按预期存在。
在第46-48行中，.attr功能不起作用。因此，.unit divs不会变黑。

任何以应该开头的评论，指向问题/错误。我是初学者，所以请批评我的工作。非常感谢任何帮助，谢谢！

EASP.html

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="EASP.css">
<head>
    <title>Etch-A-Sketch-Pad</title>
</head>
<body>
    <!--#container is supposed to be responsive to the client's specifications-->
    <div id="container"></div>
    <!--script that implements jQuery-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!--script that creates a y-by-x grid inside #container for the client to draw on-->
    <script src="EASP.js"></script>
</body>
</html>

EASP.css

#container {
    background-color: white;
/*  supposed to be
    height: h;
    width: w;
*/
}
.unit {
    height: 10px;
    width: 10px;
    margin: 1px;
    float: left;
}

EASP.js

/*  This script contains/performs the following in order of appearence:
        1. createGrid(y,x) ~ creates a grid of divs
            * client specifies arguments y and x
                - y is the amount of rows in the grid
                - x is the amount of columns in the grid
            * sets the height and width of the #container div
                - #container's size is responsive to the size of the grid
            * creates a y-by-x grid of .unit divs inside the #container div
                - every div takes up 12px-by-12px in #container
        2. creates an initial 16-by-16 grid of .unit divs inside #container div
            * createGrid(16,16)
            * #container should be 192px-by-192px
        3. colors any .unit hovered over by the mouse
            * .unit has no background-color by default
            * .unit is given {background-color: black;} when hovered over
        4. Reset and Resize button
            * when clicked
                - removes all .unit elements in the DOM
                - prompts the client for new x and y dimensions
                - createGrid(newY,newX)
*/

$(document).ready(function() {
    //creates a container and inserts a grid
    var createGrid = function(y,x) {
        this.y = y;
        this.x = x;
        //h = height value and w = width value of #container
        var h = (this.y * 12).toString() + 'px';
        var w = (this.x * 12).toString() + 'px';
        //supposed to set the height and width attributes of #container
        $('#container').attr({height: h, width: w});
        //creates a y by x grid of divs inside #container
        for(var yc = 0; yc < this.y; yc++) {
            for(var xc = 0; xc < this.x; xc++) {
                $('<div class=unit></div>').appendTo('#container');
            }
        }
    };

    //creates an initial 16 by 16 grid inside #container
    //#container should be 192px by 192px for this call
    createGrid(16,16);

    //supposed to add {background-color: black;} to the hovered over .unit
    $('.unit').hover(function() {
        $(this).attr('background-color','black');
    });
    /*think of it as drawing on a piece of paper with a black crayon.
    #container is the white paper {background-color: white;} made of
    .unit divs that have no color,
    adding the {background-color: black;} to a .unit element
    is where the blackcrayon drew
    */


    //button at the top of the page
    $('<button id=reset>Reset and Resize</button>').prependTo('body');
    //resets and resizes the grid when clicked
    $('#reset').click(function() {
        //removes all .unit elements that exist in the DOM
        $('.unit').each(function() {
            $('.unit').remove();
        });
        /*dimensions for the new y-by-x grid to be created, 
        that the client specifies*/
        var newY = prompt("What size (integer) would you like \
            your y dimension to be?");
        var newX = prompt("What size (integer) would you like \
            your x dimension to be?");
        //the new y-by-x grid is called
        createGrid(newY,newX);
    });
});

Answer 1

您应该使用css()而不是attr()。

height和width属性不会影响样式。使用css()会生成内联style属性。

更改

$('#container').attr({height: h, width: w});

要：

$('#container').css({height: h, width: w});

请注意，您不需要为每个属性提供单位作为数值，内部默认为"px"

jQuery的.attr没有应用指定的参数

以下是我遇到的问题：

1 个答案: