Question

代码是关于一个网格，它采用网格高度和宽度，并通过单击提交创建它，然后根据所选颜色选择框，在网格中绘制任何形状。有人可以向我解释我的javascript代码有什么问题吗？ code pen is here

$('#submit').on('click', function makeGrid(event){
var r = $('#inputHeight').val();
var c = $('#inputWeight').val();
/*var grid = $('table');
var tr = '<tr></tr>';
var td = '<td></td>';*/
  for (var i=0; i<r; i++){
    $('table').append('<tr></tr>');
    for(var j=0; j<c; j++){
      $('tr:last-child').append('<td></td>');
    }
  }
 });

$('table').on('click',' tr td', function(){
$(this).css('background-color',$('colorPicker').val())
});

Answer 1

<input type="submit">将send a request发送到服务器。这反过来会导致重定向。您需要在处理程序中调用preventDefault()和/或return false。

jquery选择器$("#submit")将查找标识为submit的元素，它不会选择<input type="submit">，要修复，将id="submit"添加到<input>。

另外，您可能希望在第二次按下按钮时删除<table>中的所有子项。 IE浏览器。 $("table").empty();

＆＃13;

$("#submit").on("click", function makeGrid(event) {
  var r = $("#inputHeight").val();
  var c = $("#inputWeight").val();
  $("table").empty();
  /*var grid = $('table');
  var tr = '<tr></tr>';
  var td = '<td></td>';*/
  for (var i = 0; i < r; i++) {
    $("table").append("<tr></tr>");
    for (var j = 0; j < c; j++) {
      $("tr:last-child").append("<td></td>");
    }
  }

  $("table tr td").on("click", function() {
    $(this).css("background-color", $("#colorPicker").val());
  });
  event.preventDefault();
  return false;
});

＆＃13;

body {
  text-align: center;
}

h1 {
  font-family: Monoton;
  font-size: 70px;
  margin: 0.2em;
}

h2 {
  margin: 1em 0 0.25em;
}

h2:first-of-type {
  margin-top: 0.5em;
}

table,
tr,
td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
}

tr {
  height: 20px;
}

td {
  width: 20px;
}

input[type=number] {
  width: 6em;
}

＆＃13;

<html>

<head>
  <title>Pixel Art Maker!</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
  <link rel="stylesheet" href="styles.css">

</head>

<body>
  <h1>Lab: Pixel Art Maker</h1>

  <h2>Choose Grid Size</h2>
  <form id="sizePicker">
    Grid Height:
    <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
    <input type="number" id="inputWeight" name="width" min="1" value="1">
    <input type="submit" id="submit">
  </form>

  <h2>Pick A Color</h2>
  <input type="color" id="colorPicker">

  <h2>Design Canvas</h2>
  <table id="pixelCanvas"></table>

  <script src="designs.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>

</html>

＆＃13;

像素艺术品项目jquery

1 个答案: