jQueryでの画像の切り替え

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

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

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

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

css
1.first-block .description .readmore1{
2 width: 160px;
3 height: 33px;
4 margin-right: 793px;
5 margin-bottom: 10px;
6	}
7
8.on{
9	}
10
11.off{
12}

jQuery
1$('.readmore1').on('click',function(){
2  if($(elm).hasClass('.on')){
3    $(elm).removeClass('.on').addClass('.off');
4    //onのときの処理
5    $('.readmore1').attr('src','image/readmore-on.png');
6    );
7  }else{
8    $(elm).removeClass(".off").addClass('.on');
9    //offのときの処理
10    $('.readmore1').attr('src','image/readmore.png');
11    );
12  }
13})

よろしくお願いします。

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

jQuery
1<script type="text/javascript">
2
3  $(function(){
4
5    //.accordion1の中のp要素がクリックされたら
6    $('.accordion1 img').click(function(){
7
8      //クリックされた.accordion1の中のp要素に隣接するul要素が開いたり閉じたりする。
9      $(this).next('ul').slideToggle();
10
11    });
12  });
13
14  $(function() {
15
16    // ①タブをクリックしたら発動
17    $('.tab li').click(function() {
18
19      // ②クリックされたタブの順番を変数に格納
20      var index = $('.tab li').index(this);
21
22      // ③クリック済みタブのデザインを設定したcssのクラスを一旦削除
23      $('.tab li').removeClass('active');
24
25      // ④クリックされたタブにクリック済みデザインを適用する
26      $(this).addClass('active');
27
28      // ⑤コンテンツを一旦非表示にし、クリックされた順番のコンテンツのみを表示
29      $('.area ul').removeClass('show').eq(index).addClass('show');
30
31    });
32  });
33
34//続きを読む画像切り替え
35$(function() {
36  $('.readmore1').on('click',function(){
37    if($(this).hasClass('.on')){
38      $(this).removeClass('.on').addClass('.off');
39      //onのときの処理
40      $('.readmore1').attr('src','image/readmore-on.png');
41      );
42    }else{
43      $(elm).removeClass(".off").addClass('.on');
44      //offのときの処理
45      $('.readmore1').attr('src','image/readmore.png');
46      ;
47    }
48  });
49
50
51</script>
52