【jQuery】逃げるボタンを作ってみた（addClass, removeClass）

※このページはパソコンからの閲覧を推奨しています。

どこに需要があるんだ？

って思いますよね。私も思います。
でも作りたくなってしまったので、作るしかないと思いました。

逃げるボタン

―――そもそも逃げるボタンとは

逃げるボタンとは、クリックしようとすると横に逃げてしまい、永遠に押すことのできないボタンのことです。
どこに需要があるかは分かりませんが、思いついてしまったので仕方がありません。

最近はやりの便利なサービス「jsFiddle」を使って作ってみることにしました。
オンライン上でコードを書いて、実行して、共有までできる優れたサービスです。

↓そして完成したのがこちら

※「Result」タブで結果を、HTML、CSS、JavaScriptタブでコードを見ることができます。
※スマートフォンからの閲覧は推奨しません。

HTML

<div class="container">
  <div class="item">
    <div class="inner_item active">逃げろー！</div>
  </div>
  <div class="item">
    <div class="inner_item d-none">逃げろー！</div>
  </div>
</div>

CSS

.container {
  display: flex;
  margin: 1em;
}

.item {
  margin: 1em;
  width: 150px;
}

.inner_item {
  padding: 1em;
  width: 110px;
  background-color: #39464e;
  color: white;
  text-align: center;
}

.d-none {
  display: none;
}

JavaScript (jQuery)

$(".inner_item").hover(
  function() {
    if ($(this).hasClass("active")) {
      $(".d-none").addClass("active").removeClass("d-none");
      $(this).addClass("d-none").removeClass("active");
    }
  });

おっ！ちゃんと逃げてくれますね（＾ｖ＾）

コードのポイントはaddClassとremoveClassでクラスを入れ替えているところですかね。
今回は動きメインなので、ボタンはあえてシンプルに作ってみました。

何かのお役に立てると嬉しいです。

役立つかなぁ……