1

ホバー時に画像名を image_off.jpg から image_on.jpg に変更する次のコードがあります。ギャラリー用に使用しています。

    $(function(){
     $(".img-swap").hover(
          function(){this.src = this.src.replace("_off","_on");},
          function(){this.src = this.src.replace("_on","_off");
     });
});

ただし、画像の 1 つをクリックしたときに画像名を image_on.jpg のままにしたい。これは可能で、別のものをクリックしたときにオフに戻すことは可能ですか?

ありがとう

4

4 に答える 4

2

お役に立てれば

ホバーのオンとオフで必要に応じて正常に機能し、画像をクリックすると選択されてそこにとどまり、ホバー効果は機能しません

次の画像をクリックすると、選択されている残りのすべてが削除され、ホバー効果がその上で機能します

EDIT **コードを変更しました 今すぐ試してください

$(function(){
    $(".img-swap").hover(
    function(){
        if(!$(this).hasClass("selected")) {
            this.src = this.src.replace("_off","_on");
        }
    },
    function(){

        if(!$(this).hasClass("selected")) {
            this.src = this.src.replace("_on","_off");
        }

    }).click(function(){
        $('.img-swap').removeClass('selected').attr('src',this.src.replace("_on","_off"));;
        this.src = this.src.replace("_off","_on");
        $(this).addClass("selected").attr('src',this.src.replace("_off","_on"));
    });
});
于 2012-12-06T13:49:39.117 に答える
1

hover の代わりに toggle を使用することができます:

 $(".img-swap").toggle(
      function(){this.src = this.src.replace("_off","_on");},
      function(){this.src = this.src.replace("_on","_off");
 });

編集：クリック時に画像を固定するには（オフに戻るのを防ぎます）、これを行うことができます：

$(".img-swap").hover(
      function(){this.src = this.src.replace("_off","_on");},
      function(){if (!pinned) this.src = this.src.replace("_on","_off");
 }).click(){
      $(this).data('pinned': !($(this).data('pinned')||false));
 });
于 2012-12-06T13:16:19.870 に答える
0

可能であれば、クラスのCSSホバーイベントを追加するだけです

.img-swap:hover { src: image_on.jpg }

于 2012-12-06T13:27:55.493 に答える
0

ここにいくつかの（テストされていない）コードがあります：

 $(function(){
     $(".img-swap").hover(
      function(){
          this.src = this.src.replace("_off","_on");
      },
      function(){
          if(!this.hasClass("selected")) {
            this.src = this.src.replace("_on","_off");
          }
     }).click(function() {
         $(".img-swap.selected").removeClass("selected");
         this.addClass("selected");
     });
 });

.selectedクリックされた各要素にクラスを追加しています。ホバーアウト機能はこのクラスをチェックし、画像が選択されていない場合にのみ置換を行います。

于 2012-12-06T13:27:00.977 に答える