jqueryでimg属性値を変更する場合もっと簡単な書き方はどう書けばいいでしょうか？

Question

jqueryで複数img属性値を変更する場合もっと簡単な書き方はどう書けばいいでしょうか？

該当のソースコード

$(window).resize(function(){
    var w = $(window).width();
    var x = 768;
    if (w <= x) {
    		$('img[src="https://XXXXXXX/file/img/pic_6.gif"]').attr('src','https://XXXXXXX/file/img/pic_6_sp.gif');
		$('img[src="https://XXXXXXX/file/img/pic_7.gif"]').attr('src','https://XXXXXXX/file/img/pic_7_sp.gif');
		$('img[src="https://XXXXXXX/file/img/pic_8.gif"]').attr('src','https://XXXXXXX/file/img/pic_8_sp.gif');
		$('img[src="https://XXXXXXX/file/img/pic_9.gif"]').attr('src','https://XXXXXXX/file/img/pic_9_sp.gif');
		$('img[src="https://XXXXXXX/file/img/pic_10.gif"]').attr('src','https://XXXXXXX/file/img/pic_10_sp.gif');

    } 
});

Answer 1

こう？

$(function(){
  $('img').attr('src',function(){
    return $(this).attr('src').replace(/(^https://XXXXXXX/file/img/pic_(?:[6-9]|10))(.gif)$/,"$1_sp$2");
  });
});

Answer 2

$(window).resize(function () {
  var w = $(window).width();
  var x = 768;
  if (w <= x) {
    $("img").each(function() {
      var image = $(this);
      // image.attr("src", image.attr("src").replace(".gif", "_sp.gif"));
      // 上記はコメントの通りリサイズイベントが走るたびに_spが追記されていってしまう。
      image.attr("src", image.attr("src").replace(/(_sp)?.gif/, "_sp.gif"));
    });
  }
});

Comments

[kei344]

resizeイベントごとに _sp_sp_sp.gif みたいになりませんか？

[root_jp]

あーなります！これ全然ダメですね。指摘ありがとうございます。すみませんseseさん。