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

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

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

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

目標物を確認

codepenを用意しました。

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

  • 『ここで消える』を境界線に、フェードイン、フェードアウト。
  • 「x」ボタンを押すとボタンが消えて、スクロールしても二度と出現しない。(リロードしたら復活)

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)と書きました。

  • closeClickedがfalseならfadeIn();が走る。
  • closeClickedがtrueなら条件が合致しないため、何もしない。

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

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

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

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

お疲れ様でした!

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
- WordPressが得意!
- 初心者向けGulp教材は購入者100部以上!