0

たとえば、次の 2 つの画像があるとします。

<img alt="img-estate" src="images/estate.png" />

<img alt="img-saloon" src="images/saloon.png" />

これらの画像のいずれかをクリックすると、srcを-activeクリックして追加できるようにしたいと思います。

したがって、#img-estate をクリックすると、画像の src はimages/estate-active.png. したがって、基本的には元の src の場所を読み取り、-activeクリックすると追加されます。

jQueryを使用してこれを行うにはどうすればよいですか?

4

7 に答える 7

3

以下は、クリックに続いて、文字列を効果的に切り替えます。-active

$('img').click(function(){
    var src = this.src;
    this.src = src.indexOf('-active') == -1 ? src.replace('.png','-active.png') : src.replace('-active.png','.png');
});

その文字列を追加するだけの場合:

$('img').click(function(){
    var src = this.src;
    this.src = src.replace('.png','-active.png');
});

これを質問にリストされている要素のみに適用するには、セレクターを次のように修正できます。

$('img[alt^="img-"]')

alt属性が string で始まる画像のみを選択しますimg-。

ちなみに、jQuery メソッドを使用したい場合はattr()、同じメソッドを 2 回呼び出す必要はありません。代わりに無名関数を使用するだけです。

$('img[alt^="img-"]').attr('src', function(index, currentSrc){
    return currentSrc.replace('.png', '-active.png');
});

参考文献:

于 2013-04-12T13:58:51.017 に答える
0 
$(function() {
 $('img').click(function(){
 var image =  $(this).attr('src');
 alert(image);
 var newimage = image.replace('.png','-active.png');
 alert(newimage);

 $(this).attr('src',"newimage");
 return false;
 });
});

例

于 2013-04-12T14:05:52.430 に答える
0

このような何かがうまくいくかもしれません

$('img').on('click', function() {
   var $img = $(this);
   var currentSrc = $img.prop('src');
   $img.prop('src', currentSrc.replace('.png','-active.png'));
});

デモ

于 2013-04-12T13:58:28.853 に答える