喜欢/不喜欢超链接不能以面向对象的方式工作? [英] Like/dislike hyperlink does not work in an Object-oriented manner?
问题描述
我想要一个喜欢/不喜欢的超链接来在我的页面上显示不同的内容:点击喜欢"时，显示好"；单击不喜欢"时，显示坏".我的代码是这样的:
I'd like to have a like/dislike hyperlink to display different contents on my page: when clicking 'like', displays 'good'; when clicking 'dislike', displays 'bad'. My code is like this:
<html>
<head>
<script>
function Homepage(){
this.like = document.getElementById("like");
this.dislike = document.getElementById("dislike");
Homepage.prototype = {
constructor: Homepage,
likeGame: function(event){
if(this.like.style.display == "none"){
this.like.style.display = "block";
}
event.preventDefault();
},
dislikeGame: function(event){
if(this.dislike.style.display == "none"){
this.dislike.style.display = "block";
}
event.preventDefault();
},
setListeners: function(){
console.log('in listen');
document.getElementById("hyperLike").addEventListener("click", this.likeGame);
document.getElementById("hyperDislike").addEventListener("click", this.dislikeGame);
}
}
}
</script>
</head>
<body>
<p style="display:block">
<a id="hyperLike" href="";>Like</a>/<a id="hyperDislike" href="";>Dislike</a> the game.
</p>
<p id="like" style="display:none">
good
</p>
<p id="dislike" style="display:none">
bad
</p>
<script>
var homepage = new Homepage();
window.onload = homepage.setListeners;
</script>
</body>
</html>
然而它不起作用.点击超链接没有反应.我在 setListeners 中添加了 console.log，没有记录，所以它甚至没有进入 setListeners.这里有什么问题?
However it does not work. Clicking hyperlinks has no reaction. I added console.log in setListeners, nothing logged, so it does not even go into setListeners. What's the problem here?
我有另一个非面向对象的版本，它基本上是相同的代码，它有效.
I have another none-OO version, which is basically same code, it works.
推荐答案
问题是likeGame()函数里面的this.like和<Homepage() 函数中的 code>this.like，因为函数有自己的作用域.解决这个问题的一种方法是使用箭头函数作为方法.现在 this 将始终引用 Homepage.
The problem is that this.like inside the likeGame() function is not the same as this.like in the Homepage() function, because a function has its own scope. One way to solve this is to use arrow functions as methods. Now this will always refer to Homepage.
function Homepage() {
this.like = document.getElementById("like");
this.dislike = document.getElementById("dislike");
this.likeGame = (event) => {
if (this.like.style.display == "none") {
this.dislike.style.display = "none"
this.like.style.display = "block";
}
event.preventDefault();
};
this.dislikeGame = (event) => {
if (this.dislike.style.display == "none") {
this.like.style.display = "none"
this.dislike.style.display = "block";
}
event.preventDefault();
};
this.setListeners = () => {
console.log('in listen');
document.getElementById("hyperLike").addEventListener("click", this.likeGame);
document.getElementById("hyperDislike").addEventListener("click", this.dislikeGame);
}
}
var homepage = new Homepage();
window.addEventListener("load", () => {
homepage.setListeners();
})<html>
<body>
<p style="display:block">
<a id="hyperLike" href="">Like</a>/<a id="hyperDislike" href="" ;>Dislike</a> the game.
</p>
<p id="like" style="display:none">
good
</p>
<p id="dislike" style="display:none">
bad
</p>
</body>
</html>这篇关于喜欢/不喜欢超链接不能以面向对象的方式工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
