javascript - jQuery - 每当单击重置时，它不会重置 block

Question

重置按钮使网格消失。

有两个函数导致此问题:

1. 重置()

2. main()

网格消失的原因是由于附加到containerGrid并且位于主函数内部的.empty()方法以及$resetButton.on ("click",reset)，reset参数应该有()，并传入一个参数。

这是我尝试过的:

1. $resetButton.on("点击", Reset()); 这有助于不删除网格，但它不会再删除颜色或渐变 block 。

/*--------------------------- 
    Variables 
---------------------------*/
const $containerGrid = $(".containerGrid");
let boxSide = 16;

const $gridLength = $("#gridLength");
const $gradientButton = $("#gradient");
const $randomButton = $("#random");
const $resetButton = $("#reset");

/*-- ------------------------- 
    Buttons & input
---------------------------*/
$gridLength.on("input", gridLength);
$gradientButton.on("click", incrementOpacity);
$randomButton.on("click", getRandomColors);
$resetButton.on("click", reset(16));

/*--------------------------- 
Corresponding to Event listeners 
---------------------------*/
function gridLength() {
  if (event.target.value !== 16) {
    reset(event.target.value);
  }
}

function incrementOpacity() {
  $(".cell").off("mouseenter");
  $(".cell").mouseenter((event) => {
    let opacity = parseFloat(event.target.style.opacity);
    if (opacity <= 0.9) {
      $(event.target).css({
        "opacity": `${opacity + 0.1}`,
        "backgroundColor": "#f5f5f5"
      });
    }
  });
}

function setRandomColors() {
  return Math.floor((Math.random() * 256));
}

function getRandomColors() {
  $(".cell").off("mouseenter");
  $(".cell").mouseenter((event) => {
    $(event.target).css({
      "backgroundColor": `rgb(${setRandomColors()}, ${setRandomColors()}, ${setRandomColors()})`,
      "opacity": "1"
    })
  });
}

function reset(length) {
  boxSide = length;
  main();
  $(".cell").css({
    "opacity": "0.1",
    "border": "0.5px solid black",
    "backgroundColor": "transparent"
  });
}

/*-- ------------------------- 
    Creates the Grid 
------------------------------*/
function main() {
  $($containerGrid).empty();
  for (let row = 0; row < boxSide; row++) {
    for (let column = 0; column < boxSide; column++) {
      createCell();
    }
  }
  $(".cell").css("height", `${(300 / boxSide) - 1}px`);
  $(".cell").css("width", `${(300 / boxSide) - 1}px`);
}

function createCell() {
  const $cell = $('<div class="cell"></div>');
  $cell.css("opacity", "0.1");
  $containerGrid.append($cell);
}

main();

* {
  margin: 0;
  padding: 0;
  outline: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--font-color);
}

:root {
  --linear-color1: #e66465;
  --linear-color2: #9198e5;
  --font-color: #ffffff;
  --black-color: #000000;
}

body,
html {
  background: linear-gradient(190deg, var(--linear-color1), var(--linear-color2));
  height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title header h1 {
  margin: 1em 0em 1em 0;
}

.containerGrid {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  height: 300px;
  margin-bottom: 3em;
}

.cell {
  height: 15px;
  width: 15px;
  border-radius: 3px;
  border: 0.5px solid var(--black-color);
}

.options {
  display: flex;
  justify-content: space-around;
}

button,
input {
  background-color: transparent;
  padding: .5em;
  border: 1px solid var(--font-color);
  border-radius: 3px;
  transition: 1s all ease;
}

button:hover,
input:hover {
  background-color: var(--font-color);
  color: var(--black-color);
}

button:focus,
input:focus {
  background-color: var(--font-color);
  color: var(--black-color);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ------------------------- How to Play --------------------------->
<div class="container">
  <div class="title">
    <header>
      <h1>Etch a Sketch</h1>
    </header>
  </div>
  <!-- ------------------------- Grid --------------------------->
  <section>
    <div class="containerGrid">
    </div>
    <div class="options">
      <input type="number" id="gridLength" value="16" min="3" max="64">
      <button type="submit" id="gradient">Gradient</button>
      <button type="submit" id="random">Random</button>
      <button type="reset" id="reset">Reset</button>
    </div>
  </section>
</div>

预期:仅删除彩色和渐变 block 并保留网格大小

实际结果:网格不会消失，但不会再删除彩色和渐变 block 。它应该重置除网格大小之外的所有内容

Answer 1

您以错误的方式将点击事件设置为重置按钮。下面的代码应该可以工作:

$resetButton.on("click", function() {
    reset(16);
});

完整代码:

/*--------------------------- 
    Variables 
---------------------------*/
const $containerGrid = $(".containerGrid");
let boxSide = 16;

const $gridLength = $("#gridLength");
const $gradientButton = $("#gradient");
const $randomButton = $("#random");
const $resetButton = $("#reset");

/*-- ------------------------- 
    Buttons & input
---------------------------*/
$gridLength.on("input", gridLength);
$gradientButton.on("click", incrementOpacity);
$randomButton.on("click", getRandomColors);
$resetButton.on("click", function() {
    reset(16);
});

/*--------------------------- 
Corresponding to Event listeners 
---------------------------*/
function gridLength() {
  if (event.target.value !== 16) {
    reset(event.target.value);
  }
}

function incrementOpacity() {
  $(".cell").off("mouseenter");
  $(".cell").mouseenter((event) => {
    let opacity = parseFloat(event.target.style.opacity);
    if (opacity <= 0.9) {
      $(event.target).css({
        "opacity": `${opacity + 0.1}`,
        "backgroundColor": "#f5f5f5"
      });
    }
  });
}

function setRandomColors() {
  return Math.floor((Math.random() * 256));
}

function getRandomColors() {
  $(".cell").off("mouseenter");
  $(".cell").mouseenter((event) => {
    $(event.target).css({
      "backgroundColor": `rgb(${setRandomColors()}, ${setRandomColors()}, ${setRandomColors()})`,
      "opacity": "1"
    })
  });
}

function reset(length) {
  boxSide = length;
  main();
  $(".cell").css({
    "opacity": "0.1",
    "border": "0.5px solid black",
    "backgroundColor": "transparent"
  });
}

/*-- ------------------------- 
    Creates the Grid 
------------------------------*/
function main() {
  $($containerGrid).empty();
  for (let row = 0; row < boxSide; row++) {
    for (let column = 0; column < boxSide; column++) {
      createCell();
    }
  }
  $(".cell").css("height", `${(300 / boxSide) - 1}px`);
  $(".cell").css("width", `${(300 / boxSide) - 1}px`);
}

function createCell() {
  const $cell = $('<div class="cell"></div>');
  $cell.css("opacity", "0.1");
  $containerGrid.append($cell);
}

main();

* {
  margin: 0;
  padding: 0;
  outline: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--font-color);
}

:root {
  --linear-color1: #e66465;
  --linear-color2: #9198e5;
  --font-color: #ffffff;
  --black-color: #000000;
}

body,
html {
  background: linear-gradient(190deg, var(--linear-color1), var(--linear-color2));
  height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title header h1 {
  margin: 1em 0em 1em 0;
}

.containerGrid {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  height: 300px;
  margin-bottom: 3em;
}

.cell {
  height: 15px;
  width: 15px;
  border-radius: 3px;
  border: 0.5px solid var(--black-color);
}

.options {
  display: flex;
  justify-content: space-around;
}

button,
input {
  background-color: transparent;
  padding: .5em;
  border: 1px solid var(--font-color);
  border-radius: 3px;
  transition: 1s all ease;
}

button:hover,
input:hover {
  background-color: var(--font-color);
  color: var(--black-color);
}

button:focus,
input:focus {
  background-color: var(--font-color);
  color: var(--black-color);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ------------------------- How to Play --------------------------->
<div class="container">
  <div class="title">
    <header>
      <h1>Etch a Sketch</h1>
    </header>
  </div>
  <!-- ------------------------- Grid --------------------------->
  <section>
    <div class="containerGrid">
    </div>
    <div class="options">
      <input type="number" id="gridLength" value="16" min="3" max="64">
      <button type="submit" id="gradient">Gradient</button>
      <button type="submit" id="random">Random</button>
      <button type="reset" id="reset">Reset</button>
    </div>
  </section>
</div>