个人中心
gpt4 book ai didi

javascript - jQuery 的 .attr 不应用指定的参数

转载 作者：太空宇宙 更新时间：2023-11-04 11:35:17 25 4
gpt4 key购买 nike

我正在为 Etch-A-Sketch-Pad 程序编写代码。 Pad 是一个容器 div (#container)，里面有一个 div (.unit) 网格。每个 .unit 元素总共为 12px x 12px(包括边距)。 #container 的大小取决于 .unit 网格的尺寸。比如grid的宽度是3，那么#container的宽度应该是3 * 12 = 36px。当鼠标悬停在每个 .unit 元素上时，它也应该永久变黑。

以下是我遇到的问题:

  • 在 createGrid 函数的第 29-32 行中，没有创建 #container 的维度。因此，.unit 网格不会按预期存在。

  • 在第 46-48 行中，.attr 函数不起作用。因此，.unit div 不会变黑。

任何以 supposed to 开头的评论都指向一个问题/错误。我是初学者，所以请对我的工作非常挑剔。非常感谢任何帮助，谢谢!

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);
    });
});

最佳答案

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

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

改变

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

收件人:

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

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

关于javascript - jQuery 的 .attr 不应用指定的参数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31798355/

25 4 0
文章推荐： JavaFX 列表就像 SceneBuilder 中的库一样
文章推荐： linux - 亚马逊 ec2 boto 返回空实例
文章推荐： css - 不懂CSS绝对位置和相对位置
文章推荐： javascript - 获取引用页面Servlet的URL
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com