特定ファイル名の画像が存在するとき、別画像に置き換えたい。

Question

特定ファイル名の画像が存在するとき、別画像に置き換えたいです。

具体的には、「.hoge1」の背景画像が「img1.jpg」のときのみ「imgA.jpg」、「.hoge2」内の画像が「img2.jpg」のときのみ「imgB.jpg」に変更したいです。

変更前

<div class="hoge1" style="img1.jpg"></div>
<div class="hoge2"><img src="img2.jpg"></div>

変更後

<div class="hoge1" style="imgA.jpg"></div>
<div class="hoge2"><img src="imgB.jpg"></div>

※便宜上「hoge」や「img」など共通文字列を使用していますが、実際はそれぞれ共通点のない固有の文字列となります。

以下のようなhtml内の文字列の置き換えの方法を参考にしたのですが、今回のようなimgのsrcなどの置き換えはできませんでした。

$(function(){
$('.hoge2 img').each(function(){
var txt = $(this).html();
$(this).html(txt.replace(/img2/g,'imgB'));
});
});

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

Answer 1

if($('.hoge1').css('backgroundImage').includes('img1.jpg')) {
  $('.hoge1').css('backgroundImage', 'url(imgA.jpg)');
}

といった感じで、.css('backgroundImage')を使えば、背景画像のcss値が取得できると思うので、'image1.jpg'が含まれていたらなどの判定でできるかと

Comments

[castail]

早速のご回答誠にありがとうございます。
背景画像の置き換えはご教授いただいた内容で無事実現できました！
なお、「img2.jpg」部分のimgのsrcの置き換え方法もご教授願えますでしょうか？
よろしくお願いいたします。

[turbgraphics200]

if($('.hoge2 img').attr('src', 'img2.jpg')) $('.hoge2 img').attr('src', 'imgB.jpg');とかでできるのでは？

[castail]

ご回答ありがとうございます。

ご教授頂いた内容ですと、「img2.jpg」以外でも全て「imgB.jpg」になるようなのですが、その他の記述方法はございますでしょうか？度々恐縮ですがご教授願えれば有難いです。

[turbgraphics200]

あ、すみません。
if($('.hoge2 img').attr('src') === 'img2.jpg') $('.hoge2 img').attr('src', 'imgB.jpg');
ですね。

[castail]

ご回答ありがとうございます。

ご教授頂いた内容で無事実現できました！
この度は度々のご質問にご丁寧にご回答頂き誠にありがとうございました！

Answer 2

リスト化しておいて、合致したら置き換えては？

$(function(){
  var imglist={"img1.jpg":"imgA.jpg","img2.jpg":"imgB.jpg"};
  var reg=new RegExp('^('+Object.keys(imglist).join('|')+')$',"g");
  var reg=new RegExp(Object.keys(imglist).join('|'),"g");
  console.log(reg)
  $('.hoge1,.hoge2').each(function(i){
    if(r=$(this).css('backgroundImage').match(reg)) {
      $(this).css('backgroundImage', 'url('+imglist[r[0]]+')');
    }
    if($(this).find('img').length>0){
      $(this).find('img').each(function(){
        if(r=$(this).attr('src').match(reg)) {
          $(this).attr('src',imglist[r[0]]);
        }
      });
    }
  });
});

<div class="hoge1" style="background-Image:url(img1.jpg)"></div>
<div class="hoge2"><img src="img1.jpg"><img src="img2.jpg"><img src="img11.jpg"><img src="img2.jpg"></div>

Comments

[castail]

ご回答ありがとうございます。

せっかくご回答頂いたにも関わらず恐縮ですが、今回は先にご回答頂いていた「turbgraphics200」様をベストアンサーとさせて頂きます。
何卒ご容赦下さいませ。