this问题

时间：2022-08-26 22:18:36

this问题

弹出层是一种很常见的页面显示部件,利用require js的模块化可以使部分功能组件重用性更高.以弹出层为例,探讨关于this的问题

首先来看这样一段代码

Html部分代码

<body>
    <button id="open">open</button>
    <div class="dialog-container">
        <div class="dialog-mask"></div>
        <div class="dialog-box">
            <div class="dialog-title">
                <div class="dialog-title-item">弹出层</div>
                <div class="dialog-title-close">[X]</div>
            </div>
            <div class="dialog-content">content</div>
        </div>
    </div>
    <script src="js/require.js" data-main="js/index"></script>
</body>

this问题

点击open按钮会显示弹出层,并且点一下open会有一个弹出层,点击[X]会关闭当前弹窗,简单的css和js代码我不贴出来看了

this问题

可以看到每当我点击一次open按钮,都会创建一个class=”dialog-container”的div

Js代码示例一:

$(".dialog-title-close").on("click", function(){
    $(".dialog-container").remove();
});

当我点击关闭按钮时,可以看到是所有class为dialog-container的都被清除,所以和需求不符,要求为当前的对话框关闭.此时我们可以想到this.

Js代码示例二:

利用类及类创建的对象,每一个对象的关闭即可实现需求

封装一个类,步骤省略,关闭部分代码如下所示

var that = this;
    this.close.on("click", function(){
        that.closeDialog();
    });
};
Dialog.prototype.closeDialog = function(){
    this.container.remove();
};

随机推荐

  1. JAVA中管道通讯（线程间通讯）例子

    Java I/O系统是建立在数据流概念之上的,而在UNIX/Linux中有一个类似的概念,就是管道,它具有将一个程序的输出当作另一个程序的输入的能力.在Java中,可以使用管道流进行线程之间的通信,输 ...

  2. Datatable分页

    using System; using System.Collections.Generic; using System.Web; using System.Data; /// <summary ...

  3. C&num;去掉字符串中的特殊字符

    方案一: string except_chars = ": ‘ ! @ # % … & * (  ^  &  ￥  , . , .)$"; string src = ...

  4. 高质量、处于持续更新的R包

    本文在Creative Commons许可证下发布 *软件的问题是开发人员没有稳定的资金来源支持,可能更新上做不到持续.经过考证和圈内朋友的帮助,现在把R包中高质量.持续更新的跟大数据事业相关的R包 ...

  5. PHPBB 学习

    Fixing incorrect cookie settings  设置PHPBB的cookie

  6. 从 Kubernetes 谈容器网络

    基本概念 在 Kubernetes 中.资源从管理粒度上分为三级:容器.Pod.Service. 容器 即 Docker 或者 Rocket 容器(1.0 中仅支持这两种容器). 容器是最低粒度的资源 ...

  7. js清空页面控件值

    function funClear() {var txts = document.getElementsByTagName("input");for (var i = 0; i & ...

  8. SAP字符串处理

    拼接字符串 CONCATENATE t1 t2 INTO result. "直接拼接 CONCATENATE t1 t2 INTO result SEPARATED BY space. &q ...

  9. 【uWSGI】 listen queue of socket &lpar;fd&colon; 3&rpar; 错误分析

    现在django的应用基本都是使用uWSGI来部署,类似下面 listen queue of socket "127.0.0.1:9001" (fd: 3) 的错误出现过2次,下面 ...

  10. css实现横向带箭头步骤流程效果

    通过纯css实现圆角的步骤流程效果,扩展性强,可以随意增加减少数量,兼容性ie6+. 具体代码: <style type="text/css"> ul{margin:0 ...

相关文章