jQueryでクリックした時、条件によって画像Aと画像Bを切り替えたい

Question

いつもお世話になっております。

jQuery初心者です。

先日同じ内容で質問したのですが、解決しなかったので再度質問させて頂きます。

jQueryでクリックした時、クラスの「.on」を持ってるかどうかによって画像Aと画像Bを切り替えるという動きをしたいのですがうまくいきません。

上のコードは動きますので、対象の指定と、画像の切り替え、.onのクラスをつけるのは
合っている思います。

これを、下のコードのようにhasclassとif文を使って記述すると反応しません。

    <script type="text/javascript">

  // 動く
  $(function(){
    $('.readmore1').click(function(){
      $(this).removeClass('off').addClass('.on').attr('src','image/readmore-on.png');
    });
  });


  // 動かない
  $(function(){
    $('.readmore1').click(function(){
      if($(this).hasClass('.on')){
        //onのときの処理
        $(this).removeClass('.on').addClass('.off').attr('src','image/readmore.png');
      }else{
        //offのときの処理
        $(this).removeClass('off').addClass('.on').attr('src','image/readmore-on.png');
      }
    });
  });

</script>

数時間、色々試行錯誤したのですが、解決できず、、

どこが違うんでしょうか？

その他必要事項ありましたら追記しますので仰ってください。
よろしくお願いします。

Comments

[kei344]

https://teratail.com/questions/263514 この質問と内容が同じです。teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、こちらの質問を削除されるよう運営に連絡されることをお勧めします。 https://teratail.com/help#delete-question https://teratail.com/contact/input

https://teratail.com/help/avoid-asking
> 推奨していない質問
> 過去に投稿した質問と同じ内容の質問

[hentaiman]

その程度のコードの見直しに数時間かけるぐらいなら１から書き直した方が良い
そうすればすぐに気付くもしくは気付かず無意識に修正する程度のミスがある

Answer 1

hasClass、addClass、removeClassともにクラス名の先頭に
「.」をつけてはだめ。それはDOMをつかむためのセレクタであり
クラスの付け外しの時はピリオドなしでやる必要がある

Comments

[kato00]

そうなんですね！！
ありがとうございます！
解決しました！