imgタグのsrc属性を別の画像の他属性と差し替えたい

Question

jqueryで、imgタグのsrc属性を別の画像のdata-original属性と差し替えたいです。
具体的には、hoge1のsrc属性にhoge2のdata-original属性を適用したいです。
処理実行タイミングは、hoge2読み込み時です。

変更前

<img src="img1.jpg" class="hoge1">
<img src="img2.jpg" data-original="data.png" class="hoge2">

変更後

<img src="data.png" class="hoge1">
<img src="img2.jpg" data-original="data.png" class="hoge2">

以下の処理を試しましたが、上手くいきませんでした。

var changesrc = $(this).find(".hoge2").attr('data-original');
$(".hoge1").attr('src', changesrc);

ご教授のほどよろしくお願いいたします。

Comments

[退会済みユーザー]

何をトリガーに変更したいのでしょうか？

[castail]

処理実行タイミングは、hoge2読み込み時です。

[think49]

thisは呼び出し場所で変化するキーワードです。 どういう意図で使用したのか不明なので、コード全体を書いてください。

Answer 1

具体的には、hoge1のsrc属性にhoge2のdata-original属性を適用したいです。

document.querySelector('.hoge1').src = document.querySelector('.hoge2').dataset.original;

対象が複数存在するなら、previousElementSibling を使用して下さい。

• NonDocumentTypeChildNode.previousElementSibling - Web API インターフェイス | MDN

処理実行タイミングは、hoge2読み込み時です。

MutationObserver で実現可能ですが、負荷が高い処理なのでお勧めはしません。

• MutationObserver - Web API インターフェイス | MDN

Re: castail さん

Comments

[castail]

ご教授ありがとうございました。
今回は先にご回答頂いた「Kosuke_Shibuya」様をベストアンサーとさせて頂きます。
あしからず御了承ください。

Answer 2

$(function '({
   $('.hoge1').prop('src', $('.hoge2').attr('data-original'))
});

Comments

[castail]

ご教授いた内容で実現できました！
感謝いたします。ありがとうございました。