ID振り分けられるなら、直接指定で
html
1<img src="data/A/sample1-1.png" alt="" width="100%" height="100%" id="chimg1" />
2<img src="data/A/sample1-2.png" alt="" width="100%" height="100%" id="chimg2" />
javascript
1 var imgSrc = $("img#chimg1").attr('src').split('/');
2 var chpath = $("img#chimg1").attr('src').replace(imgSrc[1], user);
3 $("img#chimg1").attr('src', chpath);
クラスに変えれれば、eqで一番目を取得してくればOKだと思います。
html
1<img src="data/A/sample1-1.png" alt="" width="100%" height="100%" class="chimg" />
2<img src="data/A/sample1-2.png" alt="" width="100%" height="100%" class="chimg" />
javascript
1 var imgSrc = $("img.chimg").eq(0).attr('src').split('/');
2 var chpath = $("img.chimg").eq(0).attr('src').replace(imgSrc[1], user);
3 $("img#chimg1").eq(0).attr('src', chpath);
問題の意図を間違えておりました。
eachで回せば、個別に変更できます。
javascript
1function changeUser(dir, imgid, vidid) {
2 var user = dir;
3 $('img.chimg').each(function(){
4 var imgSrc = $(this).attr('src').split('/');
5 var chpath = $(this).attr('src').replace(imgSrc[1], user);
6 $(this).attr('src', chpath);
7 })
8};
$('img.chimg')の部分は、$('img#chimg1, img#chimg2')でも
指定したセレクターの分だけ、処理がされます。
videoのposter,sourceのほうも変更する
srcやposterなどの変更用のクラスはタグが違うだけで、基本的には同じ処理をするので、
タグを判定し、同じ記述が重ならないようにしたほうが良いのかなと思います。
html
1<img src="data/A/sample1-1.png" alt="" width="100%" height="100%" class="chimg" />
2<img src="data/A/sample1-2.png" alt="" width="100%" height="100%" class="chimg" />
3<video controls width="100%" height="100%" poster="data/A/sample2-1.png" id="chvid" class="chimg">
4 <source src="data/A/sample2-2.mp4" class="chimg">
5</video>
javascript
1function changeUser(dir, imgid, vidid) {
2 var user = dir;
3 $('.chimg').each(function(){
4 //タグ取得
5 var tag = $(this).get(0).tagName.toLowerCase();
6
7 changeTag = 'src';
8 //videoなら対象のタグをposterにする
9 if(tag == 'video'){
10 changeTag = 'poster';
11 }
12
13 var imgSrc = $(this).attr(changeTag).split('/');
14 var chpath = $(this).attr(changeTag).replace(imgSrc[1], user);
15 $(this).attr(changeTag, chpath);
16 })
17};