は、どのように私はセレクタが、「この」ので、私は彼を隠すことができているかどうかを確認することができますどのように「この」

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

非表示にすることができます..私は非表示機能を再構築する必要があることをご検討くださいので、私はないです任意のJquery関数を使用することができます...

Answer 1

を役に立てば幸いに渡すものすべてに作用したいので、thisに。ただ、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();" />

、あなたのセレクタ引数はDOM要素以外の何かが、CSSセレクタことができれば、あなたがそのデータ型の引数をテストする必要があります。 CSSセレクタは複数の要素を表すことができるので、それにも対処したい場合はループが必要です。ここで

は、あなたがこの機能を実装する方法の例です：

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>

次の課題は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>

あなたは$のすべての呼び出しでresultObjectを再作成するので、これは、最適ではありません。だからあなたはそのことを改善することができます。結果をフィルタリングしたり、選択したノードの下にある要素を見つけたりするなどの方法があります。

私たちは脱走しています。あなたがそれを知る前に、あなたは本当に図書館を書いています。;-)

Answer 2

それはあなたが複雑なものを超えているように見えます。これは単にあなたのボタンクラスを与えることによって達成することができます。その後、

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

そして、あなたのJSにクリックハンドラを作成：

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

Answer 3

このここではウィンドウオブジェクトを指しています。

あなたは、コール/適用

を使用して、この範囲を変更することができ、次のスニペット

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

をチェックし、それはあなたが比較する必要はありません

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