1 つの重要な点:控えめな JavaScriptを作成する必要があります。これはベスト プラクティスと見なされているためです。これにより、コンテンツとコードの分離を維持できます。したがって、最初のステップは、要素のそのonclick
ハンドラーを削除することです。<button>
「クリックして非表示」というボタンをクリックして、を非表示にすることを想定しています<div>
。では、スケルトン コードを に取り込んでみましょう<script>
。
$(document).ready(function() {
$(<button>).click(function() {
$(<div>).hide();
});
});
しかし、どうにかしてそのclick
ハンドラーをそのボタンにリンクし、そのhide
関数を実際の にリンクする必要がありますdiv
。これを行う最も簡単な方法は次のとおりです。自分<button>
と<div>
いくつかの ID を指定します。まあ言ってみれば...
<button id="hide-button">...</button>
<div id="hide-div">...</div>
ここで、スケルトン コードにいくつかの変更を加える必要があります。
$("#hide-button").click(function() {
$("#hide-div").hide();
});
この単純なコードが行うことは次のとおりです。DOM が読み込まれると、名前のない関数 (その場で定義する関数に名前を付けることはできません*) がドキュメントの ready イベントから呼び出されます。click
この名前のない関数はハンドラーをボタンにアタッチし#hide-button
、ボタンをクリックすると別の無名関数が呼び出されるようにします。その関数はhide
、すべてのブラウザーで機能する jQuery マジックを呼び出して、その#hide-div
div を非表示にします。
*まあ、できますが、最初にそれらを定義してから渡す場合に限ります。このような:
var fn = function() {...};
$(document).ready(fn);
編集
質問者は ID やクラスを使用したくないため、別の解決策を次に示します。
<script>
function hide() {
$('div').hide();
}
</script>
...
<button onclick="hide()">click for hide</button>
<div></div>
function hide()
jQuery のドキュメント対応イディオム内に配置しないように注意してください。これを行うとhide()
、スコープのために へのアクセスが拒否されます。