How to hide "this"

Question

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();" />

Run codeHide result

How to check if there is a selector "this", so I can hide it. Please note that I need to rebuild the hide function, so I am not allowed to use any Jquery functions ...

Answer 1

You do not need to compare with thisat all, since you want it to work with what you are switching to $. Just leave 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();" />

Run codeHide result

Now, if your selector argument may be something other than a DOM element, but a CSS selector, you need to check the argument for its data type. Keep in mind also that CSS selectors can represent more than one element, so if you want to deal with this, you'll need a loop.

, :

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>

Hide result

, , , resultObject :

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>

Hide result

, resultObject $. , . , node (s),... ..

. , .; -)

Answer 2

.

/

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

Hide result

,

Answer 3

, . :

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

JS:

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

Answer 4

OT, , , , () , :

// 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)" />

Hide result