时间戳

首页 > 解决方案 > 喜欢/不喜欢超链接不能以面向对象的方式工作？

javascript - 喜欢/不喜欢超链接不能以面向对象的方式工作？

问题描述

我想要一个喜欢/不喜欢的超链接来在我的页面上显示不同的内容：点击“喜欢”时，显示“好”；单击“不喜欢”时，显示“不好”。我的代码是这样的：

<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>

但是它不起作用。点击超链接没有反应。我添加console.log了setListeners，没有记录，所以它甚至没有进入setListeners。这里有什么问题？

我有另一个非 OO 版本，它基本上是相同的代码，它可以工作。

标签： javascripthtmloop

解决方案

问题是函数this.like内部和likeGame()函数内部不一样this.like，Homepage()因为函数有自己的作用域。解决这个问题的一种方法是使用箭头函数作为方法。现在this总会提到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>

推荐阅读