Question

我正在构建一个小片段来隐藏div checkout我的片段：

var Modal = function(){
            Modal.prototype.hide = function(elem){
                return elem.hide(); 
         // i basically want to change the above line to this.hide();
            }
        }

            $(document).ready(function(){

                var _str = new Modal();
                var div = $('#mydiv');
                _str['hide'](div);

            });

现在，我构建这个片段的原因是因为我想了解modal.js中的代码以及它是如何工作的，让我们检查modal.js中的代码。

结帐此行：

data[option](_relatedTarget)

数据基本上是Modal的一个实例

[option]基本上是Modal.prototype.toggle（param）

和（_relatedTarget）基本上是传递的参数。

所以基本上发生在该行上的是，正在调用以下函数。

隐藏（_relatedtarget）。

我console.logged _relatedtarget并发现，它基本上是一个HTML元素，如下所示：

<a data-target="#myModal" data-toggle="modal" class="btn btn-primary btn-lg">

如果您查看切换功能，它看起来如下所示：

Modal.prototype.toggle = function (_relatedTarget) {
    return this.isShown ? this.hide() : this.show(_relatedTarget)
  }

所以我们在上面的函数中传递了以下参数：

<a data-target="#myModal" data-toggle="modal" class="btn btn-primary btn-lg">

一切正常。

现在，让我们在我的代码中查看隐藏功能：

Modal.prototype.hide = function(elem){
                return elem.hide(); 
            }

看看我的隐藏功能在某种意义上是如何不同的，我使用以下语法来隐藏我的代码：

elem.hide();

而modal.js中的代码使用以下语法：

this.hide()

但是如果我使用上面的语法并运行我的代码，则代码不起作用且元素不会被隐藏。

所以我的问题是，如何将代码中的语法更改为：

this.hide()并让我的代码正常工作，我的例子的小提琴是here。

谢谢。

亚历山大。

Answer 1

要使此函数在没有参数的情况下工作，需要Modal知道div。您可以将容器的选择器传递给构造函数，如下所示：

var _str = new Modal('#modal-container');

并将其指定为Modal的属性。示例代码：

＆＃13;

var Modal = function(containerSelector) {
  this.container = $(containerSelector);

  Modal.prototype.hide = function() {
    return this.container.hide();
  }
}

// Using a setTimeout for the demo, so you can see it first
setTimeout(function() {

  var _str = new Modal('#modal-container');
  _str['hide']();

},1000);

＆＃13;

#modal-container {
  height: 100px;
  width: 100px;
  background: #aaa;
  margin: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This div will hide after 1 second:</p>
<div id="modal-container"></div>

＆＃13;

编辑：不要将jQuery的hide()函数（在DOM元素上调用）与您自己的（在Modal对象上调用）混淆。检查this fiddle，它实现了toggle()功能，就像您在第48行一样。

更改Snippet语法以使用此关键字

1 个答案: