クリックした箇所の画像名を変更＆クラスを追加したい

Question

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

実現したいことは下記です。
上手くいかず悩んでおります。

■実現したいこと
・クリックした箇所の画像名（aaa.png）を、「bbb.png」に変更
・クリックした箇所のimgタグに「class="bbb"」を追加

恐れ入りますが、
ご教示の程よろしくお願いいたします。

<ul id="stage_2" class="active">
	<li><img src="aaa.png" onclick="change(this.src);"></li>
	<li><img src="aaa.png" onclick="change(this.src);"></li>
	<li><img src="aaa.png" onclick="change(this.src);"></li>
	<li><img src="aaa.png" onclick="change(this.src);"></li>
</ul>

// 画像がクリックされたら起動
function change(src){

	// 画像名を変更
	var src = src.replace(/aaa.png/g, 'bbb.png');

	// htmlに出力 ※できない
	$(this).html(src);

	// class"bbb"を追加 ※できない
	$(this).attr('class', 'bbb');

}

Answer 1

jQuery使っていいならこうですね。
addClass使えば追加できます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul id="stage_2" class="active">
    <li><img src="aaa.png" onclick="change(this);"></li>
    <li><img src="aaa.png" onclick="change(this);"></li>
    <li><img src="aaa.png" onclick="change(this);"></li>
    <li><img src="aaa.png" onclick="change(this);"></li>
</ul>

<script type="text/javascript">
    // 画像がクリックされたら起動
    function change(elm){

        // 画像名を変更
        var src = $(elm).attr('src').replace(/aaa.png/g, 'bbb.png');
        $(elm).attr('src', src);

        // class"bbb"を追加
        $(elm).addClass('bbb');

    }
</script>

Comments

[scoa]

ご回答ありがとうございます。
頂いた内容で上手くいきました。

Answer 2

onclickで引き渡す引数がおかしいですね
自分自身(this)をわたすのが妥当かと

<ul id="stage_2" class="active">
    <li><img src="aaa.png" onclick="change(this);"></li>
    <li><img src="aaa.png" onclick="change(this);"></li>
    <li><img src="aaa.png" onclick="change(this);"></li>
    <li><img src="aaa.png" onclick="change(this);"></li>
</ul>

function change(obj){
  obj.src = 'bbb.png';
  obj.className='bbb';
}

※classNameの調整は工夫が必要ですが、上書きしていいなら上記で十分

Comments

[scoa]

ご回答ありがとうございます。
実は、idも取得したくて、(this.id,this.src)としておりました。
※今回はsrcのみ上手くいかなかったため、idの方は省いておりました。
(this)のみでも、idもsrcも取得できるのですね、勉強になりました。