Question

我正在尝试将默认颜色选项转换为变量，因为它在两个不同的函数中使用了两次。这是我尝试过的（除其他事项外），但它似乎并没有起作用？这是我的代码的JSFiddle，适用于任何可以尝试使用它的人？我似乎无法让它发挥作用，但它似乎应该如此简单？ https://jsfiddle.net/q7bLwt8n/

＆＃13;

var defaultcolor = $(this).css("background-color", "#7fffd4");

$(document).ready(function() {
  for (var i = 0; i < 16; i++) {
    for (var j = 0; j < 16; j++) {
      $('#grid').append('<div class= square></div>');
    };
  };
  $(".square").mouseenter(function() {
    defaultcolor;
  });

  //clears the canvas and resets the color on hover back to #7fffd4//
  $("#clear").click(function() {
    $("#grid").effect("shake");
    $(".square").css("background-color", "white");
    $(".square").mouseenter(function() {
      defaultcolor;
    });
  });
  //creates a random color for each square when button is clicked//
  $("#randomcolor").click(function() {
    $(".square").mouseenter(function() {
      var randomColorChange = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
      $(this).css('background-color', randomColorChange);
    });
  });
});

＆＃13;

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: white;
}

h1 {
  color: white;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  background-color: #191919;
}

span {
  text-decoration: underline;
  color: #7fffd4;
}

.buttons {
  padding-top: 10px;
  text-align: center;
  width: 480px;
  margin: 0 auto;
}

#clear,
#randomcolor,
#usersquares {
  margin: 5px;
  padding: 8px;
  border-radius: 1px;
  background-color: #191919;
  color: white;
}

.container {
  margin-top: 20px;
}

#grid {
  width: 484px;
  height: 484px;
  margin: 10px auto;
  border: 2px solid #191919;
  box-shadow: 2px 2px 30px 10px #b2b2b2;
}

.square {
  width: 30px;
  height: 30px;
  margin: 0;
  float: left;
  outline: 1px solid black;
  background: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<h1>Etch A <span>Sketch</span></h1>
<div class="buttons">
  <button id="clear">Clear Canvas</button>
  <button id="randomcolor">Random Colors</button>
  <button id="usersquares">Squares Per Side</button>
</div>
<div class="container">
  <div id="grid"></div>
</div>

＆＃13;

Answer 1

解释器解析脚本时会评估this的值。因此，this中defaultcolor的值不是您在鼠标事件中引用的this。

相反，你可以这样做：

function set_default_color() {
    $(this).css("background-color", "#7fffd4");
}

$(".square").mouseenter(set_default_color);

为什么我的jQuery变量不起作用？

1 个答案: