为了账号安全,请及时绑定邮箱和手机立即绑定

JS:在类构造函数中添加EventListener

JS:在类构造函数中添加EventListener

神不在的星期二 2023-09-21 10:56:12
我正在编写一个评论系统。我在构建时遇到了问题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布斯

TA贡献1876条经验 获得超6个赞

您遇到的问题实际上是引用的阴影。“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 元素。


查看完整回答
反对 回复 2023-09-21
  • 1 回答
  • 0 关注
  • 80 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信