【jQuery】ある処理を行ったら以降の処理を行わない（処理を抜ける）方法

こんにちは！のせっち@nosecchi01です。

通常はAの処理、だけどBの処理を行ったら、Aの処理は行わないという

という方法をご紹介します。

目標物を確認

codepenを用意しました。

こちらの仕様は下記です。

See the Pen CloseBtn (jQuery) by Yuki Nose (@yukinouz1) on CodePen.

通常は、ターゲット位置を境にボタンを出す、隠すの行き来をさせたいけど、「x」ボタンを押したら二度と出てきて欲しくない。

という処理をしています。

CTAボタンを常に出しておきたいけど、うっとおしいから消したい！というユーザーのために「x」ボタンを用意しておくようなケースで有効です。

簡単に解説

ポイントは下記の部分です。

// 変数の定義は割愛

// 閉じるボタンを押したかどうか。
let closeClicked = false;

closeBtn.on('click', () => {
  FloatingBtn.hide();
  closeClicked = true;
  return;
});

ボタンクリックでcloseClickedをtrueに変えます。

$(window).on('scroll', function() {
  // 省略

  if (scrollY > hidePos) {
    FloatingBtn.fadeOut();
  } else if (!closeClicked) { // 閉じるボタンを押していない場合のみフェードイン
    FloatingBtn.fadeIn();
  }
})

条件分岐に(!closeClicked)と書きました。

「x」ボタン(closeBtn)を押したとき、closeClicked = trueになるので、消えたままになるということです。

この処理を書かないと、「x」ボタンを押してもスクロールでまたボタンが出現してしまいます。

『処理を抜ける』と考えると難しそうですが、true, falseで条件分岐すればあっさりと実現することができます。

【jQuery】と書きましたが、途中の処理がjQueryなだけで、true, falseでの切り替えはバニラjsでも使えますね！

お疲れ様でした！