jQuety マウスオーバープログラムの解釈について

Question

html
```ここに言語を入力
<img src="hogehoge_off.png">

```ここに言語を入力
    $(function () {
      $('img').hover(function () {
        $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
      }, function () {
          $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
      });
    });

3行目の意味を教えてください。
実行するとマウスオーバーであらかじめ用意しておいた画像が切り替わることは分かります。

私の未完成な解釈としては、
imgを
src属性を？（ここがわかりません）.attr('src', $(this).attr('src')
offをonに置き換える。

attrは第2引数を設定すると指定した属性に変更することをネットで調べたのですが、上記のプログラムではattrが何度か出てきていてわかりませんでした。
できましたら詳細にお願いします。

Answer 1

$( function() {
    $( 'img' ).hover( function() {
        var $img = $( this ); // hoverイベントが起こった要素（ここではimg要素）
        var attr = $img.attr( 'src' ); // 今のsrc属性（URL）を取得
        var repl = attr.replace( '_off', '_on' ); // URLの中の '_off' を '_on' に置換
        $img.attr( 'src', repl ); // 置換したものをsrc属性に設定（＝画像が置き換わる）
    }, function() {
        var $img = $( this );
        var attr = $img.attr( 'src' );
        var repl = attr.replace( '_on', '_off' );
        $img.attr( 'src', repl );
    } );
} );

Comments

[kei344]

yoshipuさんの書いたコードを省略部分を分割し、何をしているかのコメントをつけたのですが、どの部分がわからないかできましたら詳細にお願いします。

[yoshipu]

詳細にありがとうございます。予想を超えて省略されておりました。
引用始まり～
var attr = $img.attr( 'src' ); // 今のsrc属性（URL）を取得
var repl = attr.replace( '_off', '_on' ); // URLの中の '_off' を '_on' に置換
$img.attr( 'src', repl ); // 置換したものをsrc属性に設定（＝画像が置き換わる）
～引用終わり

疑問に思ったことが分割されました。
1行目と3行目にattrが1回ずつ合計2回出ていますが、
一回目でsrc属性を取得して2回目で置換したものをsrc属性に設定する？のでしょうか？
ご回答そのままの意味だとそう思いました。

原文の順番だとsrc属性を取得して、src属性に設定して、リプレースしているように見えます。

[kei344]

> 一回目でsrc属性を取得して2回目で置換したものをsrc属性に設定する？のでしょうか？
そうです。

【.attr() | jQuery 1.9 日本語リファレンス | js STUDIO】
http://js.studio-kingdom.com/jquery/attributes/attr

> 原文の順番だと
分割したとおりの順番に処理が行われます。引数に処理結果を渡しているだけなので。

[yoshipu]

ありがとうございます。
いただいたURLわかりやすいです。