jqueryで置換を行いたいです。

質問

natsunastu_iguさん
jqueryで置換を行いたいです。
http://shop.titles.tokyo/img/new/icons1.gif
を
http://file001.shop-pro.jp/PA01294/594/images/i_new2.png
に置き換えたいのですが以下の書き方だとうまく動いてくれませんでした。
どう記載すればいいでしょうか？

<div id="myToolTip0" class="display_none">
<h3>電気スタンド新作<img class="new_mark_img2" src="http://shop.titles.tokyo/img/new/icons1.gif" style="border:none;display:inline;margin:0px;padding:0px;width:auto;"></h3>
</div>

<Script>
$(function(){
$('.new_mark_img2').replace('http://shop.titles.tokyo/img/new/icons1.gif','http://file001.shop-p...
});
</script>

回答No.4

fujillin

ANo2です。

画像データを置き換えられないことはわかりました。

次善の策として考えられるのは、HTMLを修正することですね。
箇所数が少なければ手動でもたいした手間はかかりませんし、数がそれなりならエディタの置換機能などを利用すればよろしいかと思います。

どうしてもスクリプトでないとできない事情があるのであれば、
（何が適切な選択条件なのかよくわからないので、少々いい加減ですが…）

var imageSrc = "http://file001.shop-pro.jp/PA01294/594/images/i_new2.png";
Array.prototype.map.call(document.querySelectorAll("img.new_mark_img2"),
function(elm){ if(/new\/icons1.gif$/.test(elm.src)) elm.src = imageSrc; }
);

あるいは、mapやquerySelectorが使えない古いブラウザも対象にするのなら、
var imageSrc = "http://file001.shop-pro.jp/PA01294/594/images/i_new2.png";
var imgs = document.getElementsByTagName("img");
for(var i=0, img; img=imgs[i++];){
if(/( |^)new_mark_img2( |$)/.test(img.className) &&
/new\/icons1.gif$/.test(img.src)) img.src = imageSrc;
}

なお、上記は両方ともjQueryは用いていません。
用いれば簡略化した記述が可能になりますが、この処理だけのためにjQueryを読み込むほどの事はないという気がしましたので（他にも利用していれば別ですが）。

＞そこでreplaceを考えたのですが、うまく動かないため
＞ご質問させていただいた次第です
replaceでも同様のことは可能ですが、replaceの対象となるのは文字列ですので、画像要素そのものではなく画像要素のsrc属性（=文字列）を対象に置換しなければいけません。

回答No.3

hitomura

解答 #2 の補足を読みました。なるほど、ショッピングサイト構築・運営サービスを間借りしているので画像ファイルもそれを呼び出している img タグ（およびそれを生成しているプログラム）も修正できないという事情ですか。

ならば、replace() ではなく attr() を使いましょう。
$('.new_mark_img2').attr('src', 'http://file001.shop-pro.jp/PA01294/594/images/i_new2.png');

……でも、そのページを見ている人が JavaScript を無効にしていたら画像は切り替わりませんよ。

参考URL：

http://api.jquery.com/attr/#attr-attributeName-value

補足

hitomuraさま

ありがとうございます。

自分もこのやり方でうまくいったのですが、
サイトをよく解析してみると、いくつかアイコンがあるのですが、

<img class="new_mark_img2" src="http://shop.titles.tokyo/img/new/new.gif">
<img class="new_mark_img2" src="http://shop.titles.tokyo/img/new/sale.gif">
<img class="new_mark_img2" src="http://shop.titles.tokyo/img/new/soldout.gif">

のようにどれも同じclassを使っていたため、
この書き方ですとすべてNEWアイコンになってしまいます。
このclassは品名の横に配置するためのclassでした。

そこでreplaceを考えたのですが、うまく動かないためご質問させていただいた次第です

すいませんが、よろしくお願いします

回答No.2

fujillin

ご質問のようなことをスクリプトでやろうと思えば実現可能ですが、ANo1様のご意見に賛成です。

どうやらマークを新しいものに変えたいだけのように見受けられますので、もっと言うなら、HTMLや生成プログラムを変更する必要もまったくなく、単に、マークの画像データを置き換えれば済む話ではないのでしょうか？

そのような方法が取れない事情や条件があるのなら、それをご提示いただかないと、他の方法を考えるにしても手掛かりがないということになってしまいます。

補足

カラーミーショップというのを利用しているのですが、画像データの置き換えはできません。
理由は画像の置いているディレクトリにアクセスできないため、別の場所に画像を置いてjsでコードを置換するしかないです
固有のcssが振られてるわけでもないため、jsで強引にコードを置き換えるしか方法がなく、このようなことになっています。
よろしくお願いいたします。

回答No.1

hitomura

私はnatsunastu_iguさんではないのですが一言。

ご呈示の内容を一見するとこれは JavaScript で行うべきものではなく直接 HTML を修正すべきものと思われます。
同一内容が HTML の複数個所にあるというのであればエディタの一括置換機能が使えますし、修正が必要なファイルが複数あるならばテキストファイルの一括置換ツールが以下リンクの検索結果の通り各種存在します。
http://www.vector.co.jp/vpack/filearea/win/util/text/conv/
また、問題のページが動的に生成されるならば、その動的ページを生成しているプログラムを修正すべきでしょう。

もし上記の手段が取れない理由がございましたら補足願います。
また、回答者を指定していることから何らかの質問の続きのようですので、その質問へのリンクを呈示いただければ幸いです。