Question

我对jQuery有点粗暴所以请耐心等待。：）

代码的目标是点击，如果正方形为白色，则使用所选颜色对其进行着色。如果是所选颜色，请将其重新设置为白色。除了从一种颜色到另一种颜色之外，它的作用是有效的。例如：

当我做黑色＆gt;蓝色，它处理为黑色＆gt;白色＆gt;蓝色。

这是我的代码片段

$(pixelCanvas).on("click", "td", function(){
let background = $(this).css("background-color");
let isEmpty = !background || background === "rgb(255, 255, 255)" ||
   background === "#ffffff";
let isNotColor = background !== color;
if(isEmpty){
    $(this).css("background-color", color); 
} else if(isNotColor){
    $(this).css("background-color", color);
} else {
    $(this).css("background-color", "#ffffff");
}

}）;

这是我的代码链接

https://codepen.io/ashleighc207/pen/QaezPO

提前谢谢!!

Answer 1

所以我找到了一个将rgb转换为十六进制here并将其用于背景颜色的函数。它似乎运行良好，但我不确定它是否能在所有浏览器和操作系统中保持一致，使用Windows 10测试Chrome。无论哪种方式，它都应该让您了解需要关注的内容，并确保您的颜色代码都采用相同的格式。

/* global $ */
$(document).ready(function() {
  let color = $("#colorPicker").val();
  let row = $(".row");
  let column = $(".column");
  let submitBtn = $("#submitBtn");
  let pixelCanvas = $("#pixel_canvas");
  let mouseDown = false;


  function makeGrid(height, width) {
    for (let i = 0; i < height; i++) {
      let tableRow = $("<tr class=\"row\"></tr>");
      for (let j = 0; j < width; j++) {
        tableRow.append("<td class=\"column\"></td>");
      }
      pixelCanvas.append(tableRow);
    }
  }

  function removeGrid() {
    $("tr").remove();
  }

  function rgbToHex(rgb) {
    var a = rgb.split("(")[1].split(")")[0].split(",");
    return "#" + a.map(function(x) {
      x = parseInt(x).toString(16);
      return (x.length == 1) ? "0" + x : x;
    }).join("");
  }

  $(submitBtn).on("click", function(evt) {
    evt.preventDefault();
    removeGrid();
    let inputHeight = $("#inputHeight").val();
    let inputWidth = $("#inputWidth").val();
    makeGrid(inputHeight, inputWidth);
  });

  $("#colorPicker").on("change", function() {
    color = $("#colorPicker").val();
  });

  $(pixelCanvas).on("mousedown", function() {
    mouseDown = true;
  });

  $(pixelCanvas).on("click", "td", function() {
    let background = rgbToHex($(this).css("background-color"));
    let isEmpty = !background || background === "rgb(255, 255, 255)" ||
      background === "#ffffff";
    let isNotColor = background !== color;

    console.log(color);
    console.log(background);
    console.log(isEmpty);
    console.log(isNotColor);

    if (isEmpty) {
      $(this).css("background-color", color);
    } else if (isNotColor) {
      $(this).css("background-color", color);
    } else {
      $(this).css("background-color", "#ffffff");
    }
  });


  $(pixelCanvas).on("mouseup", function() {
    mouseDown = false;
  });

  $(pixelCanvas).on("mousemove", "td", function(evt) {
    evt.preventDefault();
    if (mouseDown) {
      $(this).attr("style", `background-color: ${color}`);
    }
  });
});

body {
  margin: 0px;
  margin-bottom: 500px; /* added this cause logs are blocking screen */
}

.container {
  text-align: center;
  font-family: Century Gothic, helvetica;
  display: flex;
  flex-direction: column;
  height: 20%;
  min-height: 100vh;
}

.row,
.column {
  background-color: #FFFFFF;
}

.content {
  display: flex;
  text-align: center;
  height: 80%;
  padding: 2%;
  justify-content: space-around;
}

.column-1 {
  display: flex;
  order: 1;
  flex: 0 1 20%;
  flex-direction: column;
}

.column-2 {
  display: flex;
  order: 2;
  flex: 0 1 80%;
  flex-direction: column;
}

.heading-one {
  flex: 0 1 100%;
  font-family: Century Gothic, helvetica;
  font-size: 70px;
  margin: 0px;
  height: 10%;
}

.form-group {
  padding: 5% 0%;
}

#pixel_canvas,
.row,
.column {
  border: 1px solid black;
}

#pixel_canvas {
  border-collapse: collapse;
  margin: 0 auto;
}

.row {
  height: 20px;
}

.column {
  width: 20px;
}

#inputHeight,
#inputWidth {
  width: 6em;
}

#submitBtn,
#colorPicker {
  border-radius: 5px;
}

#colorPicker {
  border: none;
  box-shadow: 1px 1px 1px #777777;
}

<!DOCTYPE html>
<html>

<head>
  <title>Pixel Art</title>
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body class="container">
  <h1 class="heading-one">Pixel Art Maker</h1>
  <div class="content">
    <div class="column-1">
      <h2 class="heading-two">Choose Pixel Grid Size</h2>
      <form id="sizePicker">
        <div class="form-group">
          <label for="input_height">
                    Grid Height:
                </label>
          <input type="number" id="inputHeight" name="height" min="1" max="50" value="1">
        </div>
        <div class="form-group">
          <label for="input_width">
                    Grid Width:
                </label>
          <input type="number" id="inputWidth" name="width" min="1" value="1">
          <div class="form-group">
            <input type="submit" id="submitBtn" value="Create!">
          </div>
        </div>
      </form>
      <h2 class="heading-two">Pick A Color</h2>
      <div class="form-group">
        <input type="color" id="colorPicker">
      </div>
    </div>
    <div class="column-2">
      <h2 class="heading-two">Design Canvas</h2>
      <table id="pixel_canvas"></table>
    </div>
  </div>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="designs.js"></script>
</body>

</html>

编辑：向底部添加了边距，因此日志不会阻止输入和指定的浏览器和操作系统。

jQuery在点击时改变背景颜色

1 个答案: