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');

おしらせ

受験生、大学生、数学の好きな大人の方に向けて、センター数ⅡBの過去問を解く勉強会を開催します。

広告