data-target 使い方備忘録。

いっぱいある要素のなかで個別に処理をおこないたいとき、クラスだと着け方迷うし
js〇〇〇とかあまりつけたくないのでdata-targetを使って対応。
jquery使ってます。

取得したい要素に以下を追加

data-target="type1"

data-target.html

<input id="id" type="radio" name="name" value="1" checked="" data-target="type1">

data-target.js

let target = $(this).attr('data-target');
if (target === 'type1') { $('.block1').show(); $('.block2').hide(); }
else { return false; }

else if でtargetごとに処理分けれるので、とにかく要素いっぱいあって何やってるかわかりづらい！
ってときに使うと便利。かも。

一つずつ処理を回したい

処理を回したい要素にclassとdata-targetをつける

data-target.html

<a href="" class="js-each" data-target="キャンペーン詳細">キャンペーン詳細はこちら</a>
<a href="" class="js-each" data-target="キャンペーン場所">キャンペーン場所はこちら</a>
<a href="" class="js-each" data-target="キャンペーンお申込み">キャンペーンお申込みはこちら</a>

data-target.js

  $('.js-each').each(function() {
    let $this = $(this);
    let target = $this.attr('data-target');

    if(target === 'キャンペーン詳細') {
      $this.attr('href', 'https://campaign.com/キャンペーン詳細');
    }
    else if (target === 'キャンペーン場所') {
      $this.attr('href', 'https://campaign.com/キャンペーン場所');
    }
    else if (target === 'キャンペーンお申込み') {
      $this.attr('href', 'https://campaign.com/キャンペーンお申込み');
    }
    else {
      return false;
    }
  });

なが～いリンクをあちこちにはったりする場合は管理が楽。