jQueryで複数の要素を個別にフェードイン・フェードアウト 表示要素が共存するタイプ【jQuery】

jQueryで複数の要素を個別にフェードイン・フェードアウトの概要

注意 ※バージョンや環境によっては正常に動作しない可能性があります。

下の記事で、fadeToggleを使ってフェードイン・フェードアウトをする動作を記載しました。

jQueryでフェードインフェードアウトdisplay:noneを使用してfadeToggle【jQuery】

jQueryで複数の要素を個別にフェードイン・フェードアウトの概要 注意 ※バージョンや環境によっては正常に動作しない可能性があります。 display:noneを使用するフェードイン・フェードアウトでは自分が一番気に入っている形です。...

katana-neko.com

2020.09.03

fadeToggleについての説明はそちらを参照してください。上の記事を読んでいる前提での内容になります。

今回は、それを複数使用する場合のコードです。三つのトリガーと三つの要素が個別に対応していて、最大で三つ全てが表示される形です。

下のサンプルを見てもらうのがわかりやすいかと思います。

ソースコードは、動きをわかりやすく説明するためのものと、改良したソースコードを二つ載せています。

改良版は、要素が増えていった場合に、jQueryのソースが短くなる利点があります。

フェードイン・フェードアウト動作サンプル

トリガーは3つあり、long-triggerとlong-elementの同一数字が紐づいている形です。1を押せば1の要素の表示・非表示が切り替わります。

各トリガーは他の要素の動作に影響しません。そのため、1が表示されている時に2をクリックした場合、1の下に2の要素が表示されます。

1、2、3と連続で押せば、3つすべてが表示されます。あくまで、その対になる1つの要素に対しての表示非表示を制御する形です。

ソースコード

HTML

<div class="long-trigger1">
  <p>トリガーlong-element-1</p>
</div>
<div class="long-trigger2">
  <p>トリガーlong-element-2</p>
</div>
<div class="long-trigger3">
  <p>トリガーlong-element-3</p>
</div>

<div class="long-element-1">
  <p>中身long-element-1</p>
</div>
<div class="long-element-2">
  <p>中身long-element-2</p>
</div>
<div class="long-element-3">
  <p>中身long-element-3</p>
</div>

CSS

.long-element-1, .long-element-2, .long-element-3{
    display:none;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    padding: .5rem;
    margin-top: .5rem;

}
.long-trigger1, .long-trigger2, .long-trigger3{
    background-color: #bdffc6;
  }

jQuery

$(function() {
  $('.long-trigger1').click(function() {
    $('.long-element-1').stop().fadeToggle(1000);
  });
  $('.long-trigger2').click(function() {
    $('.long-element-2').stop().fadeToggle(1000);
  });
  $('.long-trigger3').click(function() {
    $('.long-element-3').stop().fadeToggle(1000);
  });
});

ソースコードの説明

トリガーは1、2、3と3つあり、個別にjQueryでの処理の際に、要素の1、2、3と関連するようにしています。long-trigger1を押すと、long-elemnet1が反応する形です。

html側でposition指定をしていないため、デフォルトの位置に表示されます。トリガー3の下に、そのまま要素1が出てくる形ですね。要素自体も1が一番上で、3が一番下に表示されます。

各トリガーには、対応する要素以外の要素に対しての処理は書いていないので、独立して動作します。

1つのボタンで1つの要素の表示・非表示を制御する、のでしたらこの書き方で十分です。3つぐらいでもまあ、そんなに長くはないですが、5個とか10個とかになると、メンテナンスとかちょっと面倒かなという感じです。

改良版動作サンプル

動作としては長いソースコード版と同じです。

改良版ソースコード

HTML

<div class="trigger" data-target="element-1">
  <p>トリガーelement-1</p>
</div>
<div class="trigger" data-target="element-2">
  <p>トリガーelement-2</p>
</div>
<div class="trigger" data-target="element-3">
  <p>トリガーelement-3</p>
</div>

<div class="element-1">
  <p>中身element-1</p>
</div>
<div class="element-2">
  <p>中身element-2</p>
</div>
<div class="element-3">
  <p>中身element-3</p>
</div>

CSS

.element-1, .element-2, .element-3{
    display:none;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    padding: .5rem;
    margin-top: .5rem;
}
.trigger{
    background-color: #bdffc6;
  }

jQuery

$(function(){
  $(".trigger").click(function () {
    var target = '.' + $(this).data('target');
    $(target).stop().fadeToggle(1000);
  });
});

ソースコードの説明

htmlにdata属性を使っているのが特徴です。

data属性に任意の値を設定しておくことで、JavaScript・jQueryで取得・変更することが可能になります。今回のコードでは、data-targetという形で指定して、jQueryで.data（'target'）として呼んでいます。

JavaScript・jQueryで呼び出すときは、data-という部分を無視して記述します。

triggerがクリックされた際に、そのtriggerについているdata-targetを取得します。

で、targetという変数を定義して、そこに、「.」と「data属性」をくっつけて「.element-1」のようにクラス名を作り、そのクラスがfadeToggleで動作します。

triggerを1つのクラス名で表現できるため、jQueryでの記述を減らすことができます。

今回のように、要素が3つならば大して変わりませんが、要素が5つとか、10個とかになってくると、jQueryの記述が全然変わります。html側で、data-クラスをたくさん指定しなければならない、というのはありますが、jQuery側のソースは伸びないため、jQueryソースの管理がしやすいです。

まとめ

ボタンを複数使って表示・非表示を動作させる時に使える形です。

各要素を同時に表示する形です。position absoluteなどで、表示させる場所を固定してしまうなど、様々な使い方があるかと思います。

要素が増えた際にコードを短縮するために、data属性を使用しています。

data属性を使うと、jQuery・JavaScriptが非常に使いやすくなります。

dataに対してのスタイルシートも設定できるので、dataを使う方法をちゃんと覚えておくとかなり役に立ちそうです。