Irohabook
0
10679

JavaScriptでjQueryのshowとhideをつくる

jQueryを使わないで要素を消したり表示したりするには、JavaScriptのstyle.displayを使います。

function hide(array) {
    array.forEach(function (id) {
        document.getElementById(id).style.display = 'none';
    })
}
function show(array) {
    array.forEach(function (id) {
        document.getElementById(id).style.display = 'block';
    })
}

jQueryのhideとshowをJavaScriptでつくると上のようになる。上の関数は配列を引数にしているので

hide(['buttonID1', 'buttonID2']);
show(['div1', 'div2']);

と呼びます。本当は引数が存在するかどうかなどをチェックするべきですが、上の関数が show と hide の基本形になるでしょう。ちなみに、例えば下のように大カッコを抜くとうまくいきません。

hide('buttonID1', 'buttonID2');
show('div1', 'div2');
次の記事

JavaScriptの基本