Question

感谢今晚早些时候帮助我完成我的小项目的所有人。

我试图重新编写一个我几周前使用OOP javascript编写的简单程序程序。该程序是一个反应测试仪，它向用户呈现随机形状，并测量用户点击形状和呈现速度的速度。之前我终于设法在页面上显示一个随机大小和颜色的方块。现在我正在尝试编写一个事件处理函数，在单击形状时将css display属性设置为none，以便形状消失。但是，事件处理函数不起作用，到目前为止我已经尝试了几种不同的方法。请参阅下面的完整代码：

function Shape () {
  this.x = Math.floor(Math.random()*1200);
  this.y = Math.floor(Math.random()*500);
  this.draw();
}

Shape.prototype.draw = function() {
  var shapeHtml = '<div id="shape-div"></div>';
  var widthAndHeight = Math.floor(Math.random()*400);
  this.shapeElement = $(shapeHtml);
  this.shapeElement.css({
    'width': widthAndHeight,
    'height': widthAndHeight,
    position: "relative",
    left: this.x,
    top: this.y
  });
  this.shapeElement.css({
    display: "block"
  });

//Just below is where I am trying to create a function to make the shape disappear when clicked

  this.shapeElement.click(function() {
    this.shapeElement.css("display", "none");
  });

  $("body").append(this.shapeElement);
}



"use strict";
Shape.prototype.colour = function() {
  var colours = '0123456789ABCDEF'.split('');
  var randomColour = "#";
  for (i = 0; i < 6; i++) {
    randomColour+=colours[Math.floor(Math.random()*16)];
  };
  this.shapeElement.css({backgroundColor: randomColour});
}


$(document).ready(function() {
  var square = new Shape();
  square.draw();
  square.colour();

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这是行不通的。我正在向OOP过渡，并发现使用过程式编程很难做到很简单。这是典型的吗？再次感谢您的帮助。

Answer 1

您可以尝试重播：

this.shapeElement.click(function() {...

的

this.shapeElement.on("click",function() {...

您在加载后将此元素添加到DOM。另外，检查你的控制台，因为在事件监听器this.shapeElement.css("display", "none");内部可能会给你一个错误，在该上下文中this是调用事件的元素......我相信你可以使用：

$(this).css({"display": "none"});

Answer 2

每当你使用function(){时，该函数的内部都会获取一个新的调用上下文（一个新的this），具体取决于它的调用方式。但是在您的处理程序中，您不想要新的this值 - 您希望继承实例化this的{{1}}。您可以使用箭头函数，或者您可以记住处理程序上的Shape引用了单击的元素：

＆＃13;

this

＆＃13;

function Shape () {
  this.x = Math.floor(Math.random()*1200);
  this.y = Math.floor(Math.random()*500);
  this.draw();
}

Shape.prototype.draw = function() {
  var shapeHtml = '<div id="shape-div"></div>';
  var widthAndHeight = Math.floor(Math.random()*400);
  this.shapeElement = $(shapeHtml);
  this.shapeElement.css({
    'width': widthAndHeight,
    'height': widthAndHeight,
    position: "relative",
    left: this.x,
    top: this.y
  });
  this.shapeElement.css({
    display: "block"
  });

//Just below is where I am trying to create a function to make the shape disappear when clicked

  this.shapeElement.click(function() {
    $(this).css("display", "none");
  });

  $("body").append(this.shapeElement);
}



"use strict";
Shape.prototype.colour = function() {
  var colours = '0123456789ABCDEF'.split('');
  var randomColour = "#";
  for (i = 0; i < 6; i++) {
    randomColour+=colours[Math.floor(Math.random()*16)];
  };
  this.shapeElement.css({backgroundColor: randomColour});
}


$(document).ready(function() {
  var square = new Shape();
  square.draw();
  square.colour();

})

＆＃13;

如何在javascript中向原型添加事件处理函数？

2 个答案: