jQueryでの画像の切り替え

Question

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

今回、LPに「続きを読むボタン」をつけます。
このボタンを一回押すと、違う画像に代わり、もう一度押すと元の画像に戻る。
という処理をしたいです。

自分なりに書いてみたのですが、動かず、、、
お知恵を拝借できればありがたいです。

<img class="readmore1" src="image\readmore.png" alt="続きを読む">

.first-block .description .readmore1{
 width: 160px;
 height: 33px;
 margin-right: 793px;
 margin-bottom: 10px;
	}

.on{
	}

.off{
}

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

よろしくお願いします。

追記
今回の動きを追加しようとすると他のjQueryが動かなくなるため、jQuery全コード追記します。

<script type="text/javascript">

  $(function(){

    //.accordion1の中のp要素がクリックされたら
    $('.accordion1 img').click(function(){

      //クリックされた.accordion1の中のp要素に隣接するul要素が開いたり閉じたりする。
      $(this).next('ul').slideToggle();

    });
  });

  $(function() {

    // ①タブをクリックしたら発動
    $('.tab li').click(function() {

      // ②クリックされたタブの順番を変数に格納
      var index = $('.tab li').index(this);

      // ③クリック済みタブのデザインを設定したcssのクラスを一旦削除
      $('.tab li').removeClass('active');

      // ④クリックされたタブにクリック済みデザインを適用する
      $(this).addClass('active');

      // ⑤コンテンツを一旦非表示にし、クリックされた順番のコンテンツのみを表示
      $('.area ul').removeClass('show').eq(index).addClass('show');

    });
  });

//続きを読む画像切り替え
$(function() {
  $('.readmore1').on('click',function(){
    if($(this).hasClass('.on')){
      $(this).removeClass('.on').addClass('.off');
      //onのときの処理
      $('.readmore1').attr('src','image/readmore-on.png');
      );
    }else{
      $(elm).removeClass(".off").addClass('.on');
      //offのときの処理
      $('.readmore1').attr('src','image/readmore.png');
      ;
    }
  });


</script>

Answer 1

$(elm)を$(this)に変えてみるとどうでしょうか

Comments

[kato00]

変えてみました！そして今回の動きを入れようとすると他のｊQueryも動かなくなるため、全コード追記しました！この状態で動かないです、、

Answer 2

hasClass等の指定を('.on')から('on')にしたら動きました！！