0

クリックを使用してajaxで親指から大きな画像に拡大します。

たとえば、同じ html 要素を使用して img src を置き換えるだけです。

src="image_thumb.jpg"

切り替える

src="image_large.jpg"

私の質問は、ユーザーがもう一度クリックしたときに親指の画像に戻す方法です。

4

2 に答える 2

1

toggleは 1.8 で廃止され、1.9 で削除されたため、これを行う必要があります。

$('img').on('click', function(){
  var $this = $(this);
  if ($this.data('originalSrc')){
    $this.prop('src', $this.data('originalSrc'));
    $.removeData(this, 'originalSrc');
  } else {
    $this.data('originalSrc', $this.attr('src'));
    $this.prop('src', 'image_large.jpg');
  }
});

デモhttp://jsfiddle.net/PSFeJ/

于 2013-01-20T17:11:38.880 に答える
1

トグル イベントAPI を使用して、2 つの関数を使用できます。トグルを使用すると、ユーザーがクリックするたびに 2 つが交互に表示されます。

クラス メソッドを試してみたい場合は、次のようにします。

$('img').on('click', function(){
   if ($(this).hasClass('thumb')){
     $(this).removeClass('thumb').addClass('large');
     //set your large image here
   } else {
     $(this).removeClass('large').addClass('thumb');
     //set your thumb image here
   }
});

ここでのボーナスは、大きな画像やサムネイルに対応するために CSS を使用して変更を加えることができることです。

于 2013-01-20T16:47:20.347 に答える