私のウェブサイトには5行あり、それぞれに画像があります。
クリックすると画像のサイズが大きくなりますが、idは画像ソースの前にディレクトリを追加して、別の画像になるようにします。
これはjQueryで可能ですか？
現在
<img src="image.jpg" />
欲しいもの
<img src="hires/image.jpg" />
'data-source'タグの使用について読みましたが、何も機能しないようです。
試してみました
$('img').click(function(){
$(this).attr({'src'}).prepend('hires');
});
これはあなたが探しているものですか？
$('img').click(function(){
$(this).attr('src', function(i, value) {
return 'hires/' + value;
});
});
hires/ただし、クリックごとに追加されます。次を使用して、それがすでに存在するかどうかをテストできます.indexOf。
$(this).attr('src', function(i, value) {
return value.indexOf('hires/') === -1 ? 'hires/' + value : value;
});
hires/と notを切り替えたい場合hires/は、存在する場合は文字列を削除します。
$(this).attr('src', function(i, value) {
return value.indexOf('hires/') === -1 ?
'hires/' + value :
value.replace('hires/', '');
});
.prependDOM 要素を追加する jQuery メソッドです。ネイティブの文字列メソッドではありません。また、中括弧が間違っています (構文エラー)。
このようにできます。
$('img').click(function(){
$(this).attr('src', function(i, value) {
return 'hires/' + value;
});
});
$(this).attr({'src'}).prepend('hires');
上記の行にはいくつかの間違いがあります。
{'src'}ですSyntaxtError。JavaScript では、中括弧を使用して新しいオブジェクト (または新しいコード ブロック) を作成します。オブジェクトは、次のようなキーと値のペアで構成されます。
var obj = { aKey: 42 };
obj.aKey // 42
アップデート。 ES2015 以降、キーと同じ名前の変数が存在し、オブジェクトが作成されているスコープでアクセスできる場合、値を省略することができます。
var aKey = 42;
var obj = { aKey }; // Note, there're no quotes
obj.aKey // 42
$.fn.attrは、受け取る引数に基づいて、ゲッターとしてもセッターとしても機能します。$(this).attr('src')現在のsrc属性を取得し、それ$(this).attr('src', 'something')を更新するために使用することができます。
$.fn.prependは文字列では機能しません。一致する各要素の先頭にコンテンツを挿入するために使用されます。
最後に、それが目的を達成する正しい方法です。
$(this).attr('src', 'hires/' + $(this).attr('src'));
これはそれを行う必要があります：
$('img').click(function(){
var imgSRC = $(this).attr('src');
$(this).attr('src', 'hires/' + imgSRC);
});
$(this).attr('src', "hires/" + $(this).attr('src'));