複数同一idの一部path変更

Question

実現したいこと

以下HTMLの通り、複数の同一IDを持つURLに同じjavascriptを実行することで、参照srcのpathを変更したい。
ex)data/A/sample.png -> data/B/sample.png

<img src="data/A/sample1-1.png" alt="" width="100%" height="100%" id="chimg" />
<img src="data/A/sample1-2.png" alt="" width="100%" height="100%" id="chimg" />
<video controls width="100%" height="100%" poster="data/A/sample2-1.png" id="chvid">
　<source src="data/A/sample2-2.mp4">
</video>

<a href="javascript:void(0)" id="B" onclick="changeUser(this.id,'chimg','chvid');">button</a>

function changeUser(dir, imgid, vidid) {
    var user = dir;
    var path = document.getElementById(imgid);
    var imgSrc = $("img#chimg").attr('src').split('/');
    var chpath = $("img#chimg").attr('src').replace(imgSrc[1], user);
    $("img#chimg").attr('src', chpath);
};

問題

一番最初に一致したidのpathのみ変更ができており、二つ目は一つ目と同じファイルを参照してしまう。

よろしくお願いいたします。

Comments

[yoorwm]

HTMLの仕様に同じidを使用してはいけない、というのがあるのですがそこに引っかかっていませんか？

[退会済みユーザー]

すいません、そうですね。idはすべて異なってもよいのですが、その場合にこの処理を各pathに対して行うにはどのようにすべきでしょうか。

Answer 1

ID振り分けられるなら、直接指定で

<img src="data/A/sample1-1.png" alt="" width="100%" height="100%" id="chimg1" />
<img src="data/A/sample1-2.png" alt="" width="100%" height="100%" id="chimg2" />

    var imgSrc = $("img#chimg1").attr('src').split('/');
    var chpath = $("img#chimg1").attr('src').replace(imgSrc[1], user);
    $("img#chimg1").attr('src', chpath);

クラスに変えれれば、eqで一番目を取得してくればOKだと思います。

<img src="data/A/sample1-1.png" alt="" width="100%" height="100%" class="chimg" />
<img src="data/A/sample1-2.png" alt="" width="100%" height="100%" class="chimg" />

    var imgSrc = $("img.chimg").eq(0).attr('src').split('/');
    var chpath = $("img.chimg").eq(0).attr('src').replace(imgSrc[1], user);
    $("img#chimg1").eq(0).attr('src', chpath);

---

問題の意図を間違えておりました。
eachで回せば、個別に変更できます。

function changeUser(dir, imgid, vidid) {
	var user = dir;
	$('img.chimg').each(function(){
		var imgSrc = $(this).attr('src').split('/');
		var chpath = $(this).attr('src').replace(imgSrc[1], user);
		$(this).attr('src', chpath);
	})
};

$('img.chimg')の部分は、$('img#chimg1, img#chimg2')でも
指定したセレクターの分だけ、処理がされます。

---

videoのposter,sourceのほうも変更する

srcやposterなどの変更用のクラスはタグが違うだけで、基本的には同じ処理をするので、
タグを判定し、同じ記述が重ならないようにしたほうが良いのかなと思います。

<img src="data/A/sample1-1.png" alt="" width="100%" height="100%" class="chimg" />
<img src="data/A/sample1-2.png" alt="" width="100%" height="100%" class="chimg" />
<video controls width="100%" height="100%" poster="data/A/sample2-1.png" id="chvid" class="chimg">
　<source src="data/A/sample2-2.mp4" class="chimg">
</video>

function changeUser(dir, imgid, vidid) {
	var user = dir;
	$('.chimg').each(function(){
		//タグ取得
		var tag = $(this).get(0).tagName.toLowerCase();
		
		changeTag = 'src';
		//videoなら対象のタグをposterにする
		if(tag == 'video'){
			changeTag = 'poster';
		}
		
		var imgSrc = $(this).attr(changeTag).split('/');
		var chpath = $(this).attr(changeTag).replace(imgSrc[1], user);
		$(this).attr(changeTag, chpath);
	})
};

Comments

[退会済みユーザー]

回答ありがとうございます。classだと順々に各srcを処理できるのでしょうか。
以下のようになりませんでしょうか。
data/A/sample1-1.png -> data/B/sample1-1.png
data/A/sample1-2.png -> data/B/sample1-1.png

[kszk311]

問題の意図を間違えておりましたので、編集しました。失礼しました。
「srcのフォーマットが同じような形式をもつ複数の要素の、srcの一部をそれぞれ変えたい」ということですね。

[退会済みユーザー]

そうですね、質問の意図が伝わらず説明不足たいへん申し訳ありません。

ありがとうございます。対応できました。
.eachというのがあるのですね。初めて知りました。

ちなみにVideoタグもあるのですが、そちらのVideoタグにも同じclass（chimg）をいれて、$('img.chimg', 'video.chimg')　とすればよろしいのでしょうか。
それとも同一クラスを指定するほかの方法はございますでしょうか。

[kszk311]

videoタグのposterですか？それとも、sourceタグのsrcですか？
該当箇所のセレクタをつければ、動作します。
$('img.chimg, source')
とか

videoタグのposterの場合は、
『タグが「video」だったら対象をposterにする』という処理が必要です。

[退会済みユーザー]

videoタグのposter とsrc 両方となります。
PATH変更対象すべてにclass=changeを追加し、
$('img.change, video.change,source.change')
とすればよろしいのでしょうか。

[退会済みユーザー]

例えば以下のようにするとよいのでしょうか。

$('img.change').each(function () {
var imgSrc = $(this).attr('src').split('/');
var chpath = $(this).attr('src').replace(imgSrc[1], dir);
$(this).attr('src', chpath);
});
$('source.change').each(function () {
var imgSrc = $(this).attr('src').split('/');
var chpath = $(this).attr('src').replace(imgSrc[1], dir);
$(this).attr('src', chpath);
});
$('video.change').each(function () {
var imgSrc = $(this).attr('poster').split('/');
var chpath = $(this).attr('poster').replace(imgSrc[1], dir);
$(this).attr('src', chpath);
});

[kszk311]

そうですね、それぞれ記述していくならそういった感じになります。
videoの最後の処理だけ、「src」になっていますが…。
それらをまとめたソースを投稿しましたので、ご確認頂ければと思います。

[退会済みユーザー]

$('chimg').each(function(){　⇒ .chimg
tag == 'video'　⇒　'VIDEO'

でできました。大変ありがとうございました。

[kszk311]

良かったです。ソース少し間違っており失礼しました。
大文字小文字の対応も加えております。（toLowerCase）

[退会済みユーザー]

色々なAPIがあるのですね。全く知らずお手数おかけしました。
ご丁寧にありがとうございました。

[退会済みユーザー]

できたつもりでいましたが、このスクリプトを動かしても動画が切り替わっておりませんでした。
なにか原因はお判りでしょうか。

[kszk311]

現状のソースを追記していただけますか。

[退会済みユーザー]

回答ありがとうございます。
.load() の呼び出しができてないことによるものでした。

よって、VIDEOタグにsrcを記載して
$(this).attr(changeTag, chpath).load();　とすればよいのはわかるのですが、
SOURCEタグのsrcをload(); する方法がわかりません。。

Answer 2

videoタグの場合は参照先を変更した後にload()をする必要があることがわかりました。

    $('.change').each(function () {
        //変更要素定義
        changeTag = 'src';
        //ディレクトリごとに分割
        var chSrc = $(this).attr(changeTag).split('/');
        //参照パス作成
        var chpath = $(this).attr(changeTag).replace(chSrc[1], dir);
        //参照パス更新
        $(this).attr(changeTag, chpath);

        //タグがVIDEOの場合は読み込み対応必須
        if ($(this).get(0).tagName == 'VIDEO') {
            var video = $(this).get(0);
            if ($(this).hasClass('keep')) {
                video.currentTime = 1000;
            }
            video.load();
        }
    });

Comments

[kszk311]

なるほど、そうだったんですね。半端な知識で回答してしまい、失礼しました。

[退会済みユーザー]

いえいえ、こちらこそアドバイスのおかげで対応することができました。
ありがとうございました。

Answer 3

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

function changeUser(dir, imgid, vidid) {
    let ar = ['#chimg1', '#chimg2'];
    var user = dir;
    for (let i = 0; i < ar.length; i++) {
        var imgSrc = $(ar[i]).attr('src').split('/');
        var chpath = $(ar[i]).attr('src').replace(imgSrc[1], user);
        $(ar[i]).attr('src', chpath);
    }
};

というforで処理できるとは考えたのですが、

let ar = ['#chimg1', '#chimg2'];

ここをもっとうまく取得する方法はないのでしょうか。