Fatal编程技术网
  • javascript/
  • Javascript 喜欢/不喜欢超链接不能以面向对象的方式工作？

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

javascript html oop

Javascript 喜欢/不喜欢超链接不能以面向对象的方式工作？,javascript,html,oop,Javascript,Html,Oop,我希望有一个喜欢/不喜欢的超链接，在我的页面上显示不同的内容：单击“喜欢”时，显示“好”；单击“不喜欢”时，显示“不喜欢”。我的代码如下： <html> <head> <script> function Homepage(){ this.like = document.getElementById("like"); this.dislike = document.getElementById("dislike"); Homepage

我希望有一个喜欢/不喜欢的超链接，在我的页面上显示不同的内容：单击“喜欢”时，显示“好”；单击“不喜欢”时，显示“不喜欢”。我的代码如下：

<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。这里有什么问题

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

问题在于likeGame函数中的this.like与主页函数中的this.like不同，因为函数有自己的作用域。解决这个问题的一种方法是使用箭头函数作为方法。现在，这将始终是指主页

功能主页{ this.like=document.getElementByIdlike； this.dislike=document.getElementByIddislike； this.likeGame=事件=>{ 如果this.like.style.display==无{ this.dislike.style.display=无 this.like.style.display=块； } 违约事件； }; this.dislikeGame=事件=>{ 如果this.dislike.style.display==无{ this.like.style.display=无 this.lake.style.display=块； } 违约事件； }; this.setListeners==>{ 控制台。登录“监听”； document.getElementByIdhyperLike.addEventListenerclick，this.likeGame； document.getElementByIDHyperLoke.addEventListenerclick，this.dislikeName； } } var主页=新主页； window.addEventListenerload，=>{ homepage.setListeners； }

/比赛。

令人不快的

下面的演示可以将多个元素绑定到任何适用的事件和回调函数。使用此类的优点是，参数选择器、事件和回调可以是任何内容，并且对于多个侦听器不需要执行额外的步骤

演示 细节在演示中进行了注释

这是对本文中的代码的修改

//定义类 班级主页{ //传递CSS选择器 建设者选举人{ //参考选择器 const elements=document.querySelectorAllselector； //获取元素的数量 this.length=elements.length； //合并构造函数和元素 Object.assignthis，元素； } //传递回调函数 每个回调{ //迭代元素。。。 对于Array.fromthis的let节点{ //…为每个元素调用回调函数。。。 callback.callnode； } //…使方法可链接 归还这个； } //传递事件和回调 bindevent，回调{ //迭代构造函数。。。 返回this.eachfunction{ //…将每个元素注册到事件并分配回调 this.addEventListenerevent，callback，false； }; } }; //实例化主页类 const likeHate=selector=>newhomepageselector； //回收率 常数率=e=>{ //引用单击元素 常数tgt=e.target； //如果单击的具有.btn类。。。 如果tgt.匹配'.btn'{ //…获取单击的值。。。 const val=e.target.value； //…参考价格。。。 const rate=document.getElementById'rate'； //…将单击的值分配给速率的[data rate] rate.dataset.rate=val； //如果单击的值为“上级”=向上/向下竖起大拇指
let icon=val=='Superior'？'这将引用Homepage的实例，不是吗？@CollinD当您将事件处理程序添加到元素时，如果未显式设置arrow func、bind、call、apply或anonymous函数，则处理程序中的该值将始终等于元素wrapper@extempl我同意，我是在指出答案中有点不准确===HomePage将为false。HomePage的此实例将为true。如果likeGame函数中的this.like与HomePage函数中的this.like不同，那么如果在this.likeGame和this.dislikeGame函数中，我将所有this.like和this.dislike更改为其原始值：document.getElementByIdlike和document.getElementByIddis喜欢吗？是的，这也应该有效，但是每次有人单击链接时，您都必须搜索DOM元素。