JS：在类构造函数中添加EventListener
我正在编写一个评论系统。我在构建时遇到了问题Like Button。
喜欢按钮是一个很棒的字体
<i>标签作者不能喜欢自己的帖子
一个用户只能对一个帖子点赞一次
单击“喜欢”按钮，通过切换类更改其纯色填充。
我所做的代码非常巨大，不用费心阅读下面的代码片段，我只是提供它让您了解发生了什么。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Fuentes de Google -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!-- Iconos -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="comment.css" />
</head>
<body>
<!-- <div id="shelf-image-comments">
<div class="comment">
<lable>Weilory</lable><p>Here</p>
</div>
</div> -->
<!-- Contenedor Principal -->
<div class="comments-container">
<h1>Comentarios <a href="http://creaticode.com">creaticode.com</a></h1>
<!-- <ul id="comments-list" class="comments-list">
<li>
<div class="comment-main-level">
<div class="comment-avatar"><img src="http://i9.photobucket.com/albums/a88/creaticode/avatar_1_zps8e1c80cd.jpg" alt=""></div>
<div class="comment-box">
<div class="comment-head">
<h6 class="comment-name by-author"><a href="http://creaticode.com/blog">Agustin Ortiz</a></h6>
<span>hace 20 minutos</span>
<i class="fa fa-reply"></i>
<i class="fa fa-heart"></i>
<i class="comment-likes">2</i>
</div>
<div class="comment-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit omnis animi et iure laudantium vitae, praesentium optio, sapiente distinctio illo?
</div>
</div>
</div>
神不在的星期二1回答
-
HUX布斯
您遇到的问题实际上是引用的阴影。“this”关键字不再适用于该类。它指的是事件路由到的元素。您可以将要绑定到“this”关键字的引用作为参数传递给 addEventListener 函数，如下所示：this.el.addEventListener('click', function(){ console.log('here'); if(this.liked){ this.unlike(); }else{ if(!this.like()){ return } } this.liked = !this.liked; }.bind(this));再次澄清一下：您有一个类，并且有一个封装在其中的元素（类似于坚果和坚果壳）。构造函数中的“This”指的是您的类，第二个“this”指的是点击处理程序中的 HTML 元素。
随时随地看视频慕课网APP
相关分类
JavaScript