javascript - マウス クリックで JQuery を使用した画像の交換

Question

JavaScript で jQuery を使用して、画像を別の画像に置き換えたいと考えています。バスのオンライン予約サイトです。したがって、利用可能な画像をクリックすると、利用できない画像に変わります。誰もこれについて知っていますか。

Answer 1

方法はたくさんありますが、いくつか紹介します。

<img id="bannerLogo" src="/path/to/image/logoup.png" />
<script type="text/javascript">
var imageCounter = 0;
$('#bannerLogo').click(function(){
    if(imageCounter%2==0){
        $('#bannerLogo').attr('src', '/path/to/image/logodown.png');
    }
    else {
        $('#bannerLogo').attr('src', '/path/to/image/logoup.png');
    }
    imageCounter++;
});
</script>

または

(注 - jQuery 1.7 の時点で、.live() メソッドは非推奨です。.on() を使用してイベント ハンドラーをアタッチします。古いバージョンの jQuery のユーザーは、.live() よりも .delegate() を使用する必要があります。)

<img class="swapper" src="imagename_off.jpg"  />
<script type="text/javascript">
$(function(){
  $(".swapper").live('click', function() {
    if ($(this).attr("class") == "swapper") {
      this.src = this.src.replace("_off","_on");
    } else {
      this.src = this.src.replace("_on","_off");
    }
    $(this).toggleClass("on");
  });
});
</script>

これが役立つことを願っています。

ある時点で必要になった場合に備えて、ホバー スクリプトも追加します。

$('#bannerLogo').hover(
      function() { $('#bannerLogo').attr('src', '/path/logodown.png');}, 
      function() { $('#bannerLogo').attr('src', '/path/logoup.png'); 
});     

JQuery lib を含めることを忘れないでください

http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js

ありがとう、フィリップ

Answer 2

次のようなことができます。

$('#myImage').on('click', function(e) {
    var image = this;
    img.src = '/path/to/another/image.png';
});

また、交換する必要がある画像がたくさんある場合は、イベント委任を使用することをお勧めします。これらの交換可能な画像がページのどこにでもありswappable、それらすべてにクラスを割り当てると仮定しましょう。その後、AJAX を使用して新しい画像を動的に追加する場合でも、スワッピングを処理するイベント ハンドラーを 1 つだけ設定できます。

$(document).on('click', 'img.swappable', function(e) {
    var image = this;
    image.src = getAvailableImageUrl();
});