Changing Snippet syntax to use this keyword

Question

i am just building a small snippet to hide a div checkout my snippet :

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);

            });

now , the reason i built this snippet is because i wanted to understand the code in modal.js and how it works , lets checkout the code in modal.js .

checkout this line :

data[option](_relatedTarget)

data is basically an instance of Modal

[option] is basically Modal.prototype.toggle(param)

and (_relatedTarget) is basically the parameter being passed .

so basically whats happening on that line is , the following function is being called .

hide(_relatedtarget).

I console.logged _relatedtarget and found out , it is basically an HTML element , looks something like below :

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

if you have a look at the toggle function , it looks something like below :

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

so bascially we are passing the following parameter in the above function :

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

and it all works fine .

Now , lets review th hide function in my code :

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

see how my hide function differs in the sense that, i am using the following syntax to hide my code :

elem.hide();

whereas the code in modal.js uses the following syntax :

this.hide()

but if i use the above syntax and run my code , the code does't work and the element is not hidden.

so my question is, how can i change the syntax in my code to :

this.hide() and make my code work, Fiddle of my example is here .

Thank you .

Alexander.

any good reason for a downvote ?

Alexander Solonik
– Alexander Solonik

2015-03-10 19:46:50 +00:00
Commented Mar 10, 2015 at 19:46 — Alexander Solonik
– Alexander Solonik, Commented Mar 10, 2015 at 19:46

blex · Accepted Answer · 2015-03-10 20:16:42Z

1

For this function to work without a parameter, the div needs to be known by the Modal. You could do it by passing the container's selector to your constructor, like so:

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

And assigning it as a property of Modal. Example code:

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);

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

<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>

Edit: don't confuse jQuery's hide() function (called on DOM elements) with your own (called on a Modal object). Check this fiddle, it implements a toggle() function just like you have at line 48.

edited Mar 10, 2015 at 20:16

answered Mar 10, 2015 at 11:41

blex

25.7k6 gold badges49 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alexander Solonik Over a year ago

thanks for ur reply , but see how in the twitter bootstrap code github.com/twbs/bootstrap/blob/master/js/modal.js#L48 (Line 48) , only this.hide() is used , not this.container.hide(); .

blex Over a year ago

@AlexanderSolonik I added a little something at the bottom of my answer, which replicates what you are talking about.

blex Over a year ago

@AlexanderSolonik Glad it helped! Having different hide() functions can be a little confusing. The only difference is the type of the object it is called on.

Collectives™ on Stack Overflow

Changing Snippet syntax to use this keyword

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related