selectLink

スマホとPCでhref属性を切り替えるスクリプトです。カスタムデータ属性のdata-select-linkに小さいサイズからURLを記述します。ウィンドウサイズによって動的に切り替わります。

• カスタムデータ属性にdata-select-linkを使用します。
• 値にはシングルクオーテーションとブラケットで囲み、小さいウィンドウサイズ用のURLから指定、ダブルクオーテーションで囲み、カンマでつなげる

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

• chageWidthには切り替えるウィンドウサイズ（デフォルト768px）を指定します

$(function() {
  function selectLink() {
    // 処理対象とする要素。
    var $selectLink = $('[data-select-link]');
    // リンクを切り替えるウィンドウサイズ。
    var chageWidth = 768;
    // href属性に渡すURLを格納する変数の初期化。
    var setData = {};
    // 現在のウィンドウサイズの測定。
    var windowWidth = window.innerWidth;

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

      // src属性の切り替え。
      if(windowWidth >= chageWidth) {
        setData = $data[1];
      } else {
        setData = $data[0];
      }
      $this.attr('href', setData);
      console.log(setData);
    });
  }
  selectLink();

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