function $(selector) {

  var resultObject = {
    hide: function() {
      if (selector == this) {
        selector.style.visibility = "hidden";
      }

    }
  };

  return resultObject;
}

<input type="button" value="hide myself with my jquery " onclick="$(this).hide();" />

function $(selector) {

  var resultObject = {
    hide: function() {
      if (selector == this) {
        selector.style.visibility = "hidden";
      }

    }
  };

  return resultObject;
}

<input type="button" value="hide myself with my jquery " onclick="$(this).hide();" />

How can check if the selector is "this" so I can hide him.. Please consider that I have to rebuild the hide function so I am not allowed to use any Jquery functions...

• javascript

• 1 Use a function in onclick and pass it the parameter of this instead – Daniel_ZA Commented Dec 13, 2016 at 19:13
• 1 What does this have to do with jQuery though? – Ryan Commented Dec 13, 2016 at 19:15
• 1 How in the world did you come up with this bizarre code? – vsync Commented Dec 13, 2016 at 19:16
• @vsync to me it looks like a jQuery plugin without using jQuery. Maybe he wants to write his own library. – empiric Commented Dec 13, 2016 at 19:18
• @empiric - I highly doubt that. to me it looks a novice question, asked in a novice way, which cannot possibly be of a person building a library. – vsync Commented Dec 13, 2016 at 19:41

4 Answers 4

You don't need to compare to this at all, since you want it to work to whatever you pass to $. Just leave out the if:

function $(selector) {
    var resultObject = {
        hide: function () {
            selector.style.visibility = "hidden";
        }
    };
    return resultObject;
}

<input type="button" value="hide myself with my jquery " onclick="$(this).hide();" />

Now, if your selector argument could be something else than a DOM element, but a CSS selector, then you need to test the argument for its data type. Be aware also that CSS selectors can represent more than one element, so if you want to deal with that as well, you'll need a loop.

Here is an example how you could implement this functionality:

function $(selector) {
    var nodes = typeof selector === "string" 
        ? Array.from(document.querySelectorAll(selector))
        : [selector];
    var resultObject = {
        hide: function () {
            nodes.forEach(function (node) {
                node.style.visibility = "hidden";
            });
        }
    };
    return resultObject;
}

<input type="button" value="hide all divs with my jquery " 
       onclick="$('div').hide();" />
<div>div 1</div>
<div>div 2</div>

The next challenge would be to make this chainable, which you can do by putting all necessary state in resultObject and returning that on every method:

function $(selector) {
    var resultObject = {
        nodes: typeof selector === "string" 
                ? Array.from(document.querySelectorAll(selector))
                : [selector],
        hide: function () {
            resultObject.nodes.forEach(function (node) {
                node.style.visibility = "hidden";
            });
            return resultObject;
        },
        text: function (txt) {
            resultObject.nodes.forEach(function (node) {
                node.textContent = txt;
            });
            return resultObject;
        },
        color: function (colorCode) {
            resultObject.nodes.forEach(function (node) {
                node.style.color = colorCode;
            });
            return resultObject;
        }
    };
    return resultObject;
}

<input type="button" value="color and put text in divs with my jquery " 
       onclick="$('div').color('red').text('clicked!');" />
<div>div 1</div>
<div>div 2</div>

This is not optimal, as you recreate the resultObject with every call of $. So you could look into improving on that. Then there should be ways to filter results, find elements below the selected node(s), ... etc.

But we are digressing. Before you know it you're really writing a library. ;-)

It looks like you're over complicating things. This can be achieved by simply giving your button a class:

  <input type="button" value="hide myself with my jquery " class="hideme"/>

And then creating a click handler in your JS:

$('.hideme').click(function(){
    $(this).hide();
});

this here is pointing to window object.

you can change the scope of this using call/apply

check the following snippet

function $(selector) {


  var resultObject = {
    hide: function() {
      this.style.visibility = "hidden";
    }
  };

  return resultObject;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" value="hide myself with my jquery " onclick="$(this).hide.call(this);" />

Hope it helps

OT, since others have already pointed out, that you seem to (over-)complicate things,
a different approach to your code:

// a utility ...
var style = (prop, value) => node => (node && node.style[prop] = value, node);
// ... in action ...
var hide = style("visibility", "hidden");

<!-- ... and a possible way to use it -->
<input type="button" value="hide myself with my jquery " onclick="hide(this)" />