クリックしたらclassがONになり、もう一度クリックするとOFFになる動きができません。

Question

前提・実現したいこと

offの部分をクリックしたらclassがonに変わって
もう一度クリックしたらonからoffに変わる

ということをしたいのですが、onになった後にクリックしても再び「offの状態をクリックした」という風に動いてしまいます。

最初にクリックしてoffをonに変えているはずなのに、offの反応が出るのが納得できません。
よろしくお願いします。

発生している問題・エラーメッセージ

<div class="off book-position shelf1-book book1">
  <div class="book-before">
    <div class="rect">
      <div class="book-all book-top"></div>
      <div class="book-all book-right"></div>
      <div class="book-all book-covor"></div>
    </div>
  </div>
  <div class="book-after">
    <div class="book-background">
      <img src="../images/books/20dainisiteokitai17nokoto.jpg">
    </div>
  </div>
</div>

    $(".off").on("click", function(){
      $(".book-after", this).show('slow');
      console.log(1)
      $(this).removeClass('off').addClass('on');
      console.log(2)
    });
    $(".on").on("click", function(){
      $(".book-after", this).hide('slow');
      console.log(3)
      $(this).removeClass('on').addClass('off');
      console.log(4)
    });

補足情報

Answer 1

.offのオブジェクトからoffクラスを削除するのは競合するのでNGです
親要素から引き継いで処理するのが妥当

$(document).on("click",".off", function(){

的なことをするか、「book-position,shelf1-book,book1」などの
クラスを利用してアクセスするのが妥当です

Comments

[umi3]

ありがとうございます！
うまく３つのクラスを利用してやってみます！

Answer 2

$(".off").on()は実行されたタイミングでHTML上にある.offの要素に対して効きます。
無ければ効かないので$(".on").on()はどの要素にも適用されていません。

「.offの要素」「.onの要素」ではなく、ボタンに対してクリックイベントを割り当てて、そのボタンのクラスがクリック時点で.offか.onかを判別して処理を切り替えてみてください。

Comments

[umi3]

ありがとうございます！
なるほど、うまく適応できていなかったのですね
やはりボタンにするのがシンプルでわかりやすいですかね。。。