主婦がアプリをリリースするまでの軌跡

自宅でお小遣い稼ぎをしたい主婦がアプリリリースを目指すブログです。

【jQuery】show/hide ~イベントによって表示・非表示を切り替える~

f:id:song-of-life1352607:20180113005923j:plain

こんにちは、マリンです。

今回はボタンクリックなどのイベントによって

簡単に要素の表示・非表示を切り替えようと思います。





概要

任意の要素の表示・非表示をボタンのクリックで切り替えます。

ボタンを押すと要素を非表示に、もう一度押すと表示させます。

詳細

Rails環境で行っているため、JSの記述はcoffee scriptです。

View

<!-- app/views/samples/index.html.erb -->

<div class="target-element" data-display="on">
    <p>この部分を切り替えます。</p>
</div>

<button type="button" class="btn btn-md btn-default switch-display">Switch</button>

<script>
    samples.switchDisplay();
</script>




上から順番に解説します。

<div class="target-element" data-display="on">
    <p>この部分を切り替えます。</p>
</div>

この部分が表示したり非表示にしたりする要素です。

target-elementjQueryでこの部分を特定するためのセレクタです。

data-display="on"は、現状が表示中かどうかを判定するためのものです。


<button type="button" class="btn btn-md btn-default switch-display">Switch</button>

表示・非表示の切り替えボタンです。

Bootstrapを使っているので、btnなどのクラスでスタイルを当てています。

switch-displayはイベントの対象となるセレクタです。


CoffeeScript

class SamplesController

    switchDisplay: ->
        $('.switch-display').on 'click', ()->
            if $('.targe-element').data('display') == 'on'
                $('.switch-display').data('display', 'off')
                $('.switch-display').hide()
            else
                $('.switch-display').data('display', 'on')
                $('.switch-display').show()
        return

this.samples = new SamplesController




上から順番に解説します。(class ~~については省略します)

$('.switch-display').on 'click', ()->
    if $('.targe-element').data('display') == 'on'

.switch-display(ボタン)がクリックされたら、

まず切り替え対象の要素の持つdata-displayの値が

onであるかそうでないか検証します。


$('.switch-display').data('display', 'off')
$('.switch-display').hide()

値がonの時、つまり表示状態の時には

data-displayの値をoffにし、

切り替え対象の要素をhide()で非表示にします。


else
   $('.switch-display').data('display', 'on')
   $('.switch-display').show()

値がoffので非表示状態の時には

data-displayの値をonにし、

切り替え対象の要素をshow()で表示にします。


まとめ

要点としては、

  • 切り替えの着火剤となるイベント

  • hideによる非表示

  • showによる表示

この3点です。

今回はイベントをクリックにしましたが、

hoverなどで自作のポップオーバーに使ったりなど

イベントを変えればいろいろと応用が効くと思います。