Question

我正在研究Odin项目的javascript / jquery项目，以制作一个etcha sketch（各种各样）。最初网页加载很好，但是当我试图改变＆＃34; gridval＆＃34;如果出现提示，则只会更改框大小，但不会更改填充给定空间的框数。

提前感谢您的帮助。

HTML

<!DCOTYPE html>
<html>
<head>
    <title>Java Project</title>
    <link rel="icon" href="https://www.codementor.io/assets/page_img/learn-javascript.png">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/script.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

</head>
<body>
    <button class="clear_button">Clear screen</button>
    <div id="container"></div>
    <script>creategrid();</script>
    <script>hovereffect();</script>
</body>
</html>

CSS

#container{
    width:400px;
    height:400px;
    background-color: #fc6;
}
.box{
    width:52px;
    height:52px;
    display:inline-block;
    margin: 1px;
    background-color: #f86;
}
.clear_button{
    background-color: #fc6;
    color: #ffe;
    border:none;
    border-radius: 2px;
    padding: 10px;
    margin: 10px;
}
.clear_button:hover{
    background-color: #426;
}

的JavaScript

gridval = 16;
function creategrid(){
    $(document).ready(function(){
        //make grid code
        for(var x = 0; x < gridval; x++){
            for(var y = 0; y < gridval; y++){
                var box = $("<div class='box'></div>");
                box.appendTo('#container');
            }
        }
        var width_height = 400/gridval - 2;
        var box_class = document.querySelectorAll(".box");
        for(var i = 0; i < box_class.length; i++){
            box_class[i].style.width = width_height;
            box_class[i].style.height = width_height;
        }
        //clear button code
        $(".clear_button").click(function(){
            $(".box").css("background-color", "#f86");
            var val = gridval;
            gridval = prompt("Please enter a value between 2 and 100 for the grid size!", val);

            if(gridval != null) {
                var width_height = 400/gridval - 2;
                var box_class = document.querySelectorAll(".box");
                for(var i = 0; i < box_class.length; i++){
                    box_class[i].style.width = width_height;
                    box_class[i].style.height = width_height;
                }
            }
        });
    });
}
//hover effect code
function hovereffect(){
    $(document).ready(function(){
        $(".box").hover(function(){
            $(this).css("background-color", "#0ba");
        }, function(){
            $(this).css("background-color", "#9dd");
        });
    });
}

Answer 1

您的代码需要全面改革，请参阅评论：

＆＃13;

//The ready event will only be triggred once; on your page load.
$(function() {

	//Default value
    var gridval = 16;
    
    /**
     * Create the grid
     */
    function createGrid(gridval) {
        //make grid code
        for (var x = 0; x < gridval; x++) {
            for (var y = 0; y < gridval; y++) {
                var box = $("<div class='box'></div>");
                box.appendTo('#container');
            }
        }
        var width_height = (400 / gridval) - 2;
        var box_class = document.querySelectorAll(".box");
        for (var i = 0; i < box_class.length; i++) {
            box_class[i].style.width = width_height+'px'; //You needed +'px' here
            box_class[i].style.height = width_height+'px'; //You needed +'px' here
        }
    }

    //Execute the function on load
    createGrid(gridval);

    //Event delegation on since your elements will be created dynamically
    $(document).on({mouseenter: function() {
        $(this).css("backgroundColor", "#0ba");//backgroundColor instead of background-color
    }, mouseleave: function() {
        $(this).css("backgroundColor", "#9dd");
    }}, ".box");

    //clear button code
    $(".clear_button").click(function() {      
        //$(".box").css("backgroundColor", "#f86"); // you don't need this all the elements will be removed!
        var val = gridval;
        gridval = prompt("Please enter a value between 2 and 100 for the grid size!", val);

        if (gridval != null) {
            //Empty the container
            $("#container").empty();
            createGrid(gridval);
        }
    });

});

＆＃13;

#container {
    width: 400px;
    height: 400px;
    background-color: #fc6;
}

.box {
    width: 52px;
    height: 52px;
    /* Remove inline block */
    display: block;
    /* Add float*/
    float:left;
    margin: 1px;
    background-color: #f86;
}

.clear_button {
    background-color: #fc6;
    color: #ffe;
    border: none;
    border-radius: 2px;
    padding: 10px;
    margin: 10px;
}

.clear_button:hover {
    background-color: #426;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="clear_button">
    Clear screen</button>
<div id="container"></div>

＆＃13;

Javascript全局变量没有改变？！

1 个答案: