selectLink

概要

• スマホとPCでhref属性を切り替える
• .js-select-linkとカスタムデータ属性のdata-select-linkを指定する
• ウィンドウサイズに応じて動的にもhref属性が切り替わる

スクリプト

• $selectLinkには対象となる要素
• $dataにはカスタムデータ属性名を指定
• デフォルトでは768pxでPC向けのURLに切り替わる

$(function() {
  // @desc - アンカータグのリンク先をウィンドウサイズによって動的に切り替える
  // 処理対象とする要素。
  var $selectLink = $('.js-select-link');
  function selectLink() {
    // href属性に渡すURLを格納する変数の初期化。
    var setData = {};
    // 現在のウィンドウサイズの測定。
    var windowWidth = parseInt(window.innerWidth);

    $selectLink.each(function() {
      var $this = $(this);
      // カスタムデータ属性からhref属性に指定する値を配列で取得。
      var $data = $this.data('select-link');

      // 768px以上でカスタムデータ属性の2つ目の値を、768px未満で1つ目の値に切り替える。
      if(windowWidth >= 768) {
        setData = $data[1];
      } else {
        setData = $data[0];
      }
      $this.attr('href', setData);
    });
  }
  selectLink();

  // 動的なリサイズは操作後0.2秒経ってから処理を実行する。
  var resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      selectLink();
    }, 200);
  });
});

マークアップ

• クラス属性に.js-select-linkを指定する
• カスタムデータ属性にdata-select-linkを使用する
• 値にはシングルクオーテーションとブラケットで囲み、URLはダブルクオーテーションで囲み、カンマでつなげる

<a href="example.com/sp" data-select-link='["example.com/sp", "example.com/pc"]' class="js-select-link">data-select-link</a>