提示更改变量

Question

我正在完成 odin 项目课程，并被困在画板项目中。任务是使用 jquery 创建一个网格，将鼠标悬停在上面时填充正方形，然后使用一个按钮来清除该区域并提供更改该区域中正方形数量的选项。在我的代码中，我试图通过提示输入来更改网格中的方块数，但是在我在提示中输入不同的数字后，变量并没有改变。

我的 javascript-

$(document).ready(function() {
//create table
var area = 16;

for(i=0;i<area;i++) {
    $('table').append('<tr></tr>')
};
for(i=0;i<area;i++) {
    $('tr').append('<td></td>')
};
//fill in background when hovered over
$('td').hover(function() {
    $(this).addClass('fill')    
});
//clear pad when button is clicked and set new area
$('button').click(function() {
    $('td').removeClass('fill')    
    var input = prompt("enter desired area of new sketchpad (ex. \"16\" for a 16x16 grid, \"64\" for a 64x64 grid)","16");
    area = input;

});
});

我的html-

<!doctype html>

<html lang="en">
<head>
    <title>Skethpad</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <button type="button">Clear Sketchpad</button>
    <div id="container">
        <table>

        </table>    
    </div>
</body>
</html>

任何帮助或指点将不胜感激！

编辑-使用 Waterscroll 的解决方案我能够使用用户提示更改网格，但现在单个元素在提示后悬停时不会填充，但会在提示之前填充。有什么想法吗？

Edit-修复了所有问题，感谢大家的帮助！这是 javascript 的工作方式

$(document).ready(function() {
createTable(16);
hoverOver();
});

//create table
var createTable = function(area) {
    $('table').empty();
    for(i=0;i<area;i++) {
        $('table').append('<tr></tr>')
    };
    for(i=0;i<area;i++) {
        $('tr').append('<td></td>')
    };    
};

//fill in <td> elements when hovered over
var hoverOver = function() {
    $('td').hover(function() {
        $(this).addClass('fill');  
        console.log("filling");
    });
}

//clear and create new table when button is clicked
var onClick = function() {
    $('td').removeClass('fill')    
    var input = prompt("enter desired area of new sketchpad (ex. \"16\" for a 16x16 grid, \"64\" for a 64x64 grid)","16");
    if (input != null) {
        createTable(parseInt(input));
        hoverOver();
    } else {
        createTable(16);
        hoverOver();
    }
};

Answer 1

您必须再次执行代码才能使新区域生效。

$(document).ready(function() {

    function createTable(area) {
        //create table
        $('table').empty();

        for(i=0;i<area;i++) {
            $('table').append('<tr></tr>')
        };
        for(i=0;i<area;i++) {
            $('tr').append('<td></td>')
        };
        //fill in background when hovered over
        $('td').hover(function() {
            $(this).addClass('fill')    
        });
    }

    createTable(16);

//clear pad when button is clicked and set new area
$('button').click(function() {
    $('td').removeClass('fill')    
    var input = prompt("enter desired area of new sketchpad (ex. \"16\" for a 16x16 grid, \"64\" for a 64x64 grid)","16");
    createTable(parseInt(input));

});
});

Answer 2

您必须对该输入调用一个操作，否则您将看不到变量在任何地方更新。最好通过创建一个函数来完成。

/** 
  Setup the area
*/
function updateArea( n ){
  n = +n; // <-- convert string to nubmer, eg. "16" to 16
  /**
    Then do whatever has to be done to see the area
    with the updated value
  */
  $('#area').text( n ).css({
    width: n,
    height: n
  });
}


$(document).ready(function() {
  var area = 16;

  updateArea( area );

  $('button').click(function() {
      var input = prompt("enter desired area of new sketchpad (ex. \"16\" for a 16x16 grid, \"64\" for a 64x64 grid)","16");
      updateArea(input);

  });
});

<script src='http://code.jquery.com/jquery.js'></script>

<button type="button">Clear Sketchpad</button>
<div id="area" style="background:gray;"></div>

Answer 3

你的逻辑是正确的。面积的值确实发生了变化。但是，缺少两件事。

1. 加载页面时，您将创建表。但是，单击按钮时，您只会更改 Area 的值，而不会再次创建表。

2. 为了使新的面积值生效，还需要清除当前表格元素。

var area = 16;

$().ready(function()
{
  drawtable();

$('button').click(function() {
$('td').removeClass('fill');
$('table').html("");
var input = prompt("enter desired area of new sketchpad (ex. \"16\" for a 16x16 grid, \"64\" for a 64x64 grid)","16");
area = input;
 drawtable();
});
});

function drawtable()
{
    for(i=0;i<area;i++) {
    $('table').append('<tr></tr>')
};
for(i=0;i<area;i++) {
    $('tr').append('<td></td>')
};

//fill in background when hovered over
$('td').hover(function() {
    $(this).addClass('fill')    
});
//clear pad when button is clicked and set new area

}

http://jsfiddle.net/zpw02u89/1/