0

1ページに多数の人物の写真があり、マウスオーバーで人物の代替写真を表示し、マウスアウトで写真をデフォルトに戻したい。また、誰かが写真をクリックして自分のプロフィール（サイドバーに表示される）を表示したときに、代替写真を表示したいと思います。誰かが別の人をクリックすると、その人のデフォルトの写真が表示されます。これを実現するためにクリックイベントとホバーイベントを組み合わせるのに問題があります。

これが私がこれまでに持っているものです。私はそこでパーティーをしていますが、これは以前に表示したプロフィール写真をデフォルトの写真に戻しません。別のプロフィール写真がクリックされたときに、以前に表示したプロフィールからクリックイベントを削除するにはどうすればよいですか？

    $('.rollover').click(function() {
        $(this).unbind('mouseout'); 
    }).mouseover(function() {
          img_src = $(this).attr('src'); //grab original image
          new_src = $(this).attr('rel'); //grab rollover image
          $(this).attr('src', new_src); //swap images
          $(this).attr('rel', img_src); //swap images
    }).mouseout(function() {
          $(this).attr('src', img_src); //swap images
          $(this).attr('rel', new_src); //swap images
    });

前もって感謝します。

4

3 に答える 3

0

メソッドを使用してクリックハンドラーをバインドできますon。

$(document).on({
    mouseenter: function () {
      img_src = $(this).attr('src'); 
      new_src = $(this).attr('rel'); 
      $(this).attr('src', new_src); 
      $(this).attr('rel', img_src); 
    },
    mouseleave: function () {
      $(this).attr('src', img_src); 
      $(this).attr('rel', new_src); 
    }, 
    click: function() {
     // ...
    },
}, ".rollover");
于 2012-09-03T03:16:59.057 に答える
0

rel属性は、アンカータグとリンクタグ専用です。別の方法を試す必要があります。ここでフィドルを作成しました。これがあなたが探しているものであるかどうか見てみましょう。

于 2012-09-03T04:44:49.343 に答える
0

これが私がやったことであり、私が望んでいたように機能します。これを単純化する方法があるかもしれません、そして私は提案を受け入れるでしょう。返信してくれた人に感謝します。

jQuery(document).ready(function($) {

//rollover swap images with rel 
  var img_src = "";
  var new_src = "";

$('.rollover').click(function() {

        if($(this).hasClass("clicked"))
    {
            //do nothing if this element has already been clicked
    }
    else 
    {   
        //Unbind the hover effect from this element
        $(this).removeClass("rollover");
        $(this).unbind('mouseenter').unbind('mouseleave')

        //Go through and find anything having 'clicked' class -
        //in theory, there should only be one element that has the 'clicked' class at any given time.
        $('.clicked').each(function (){
                $(this).removeClass("clicked");
                $(this).addClass("rollover");

                //Swap the images
                img_src = $(this).attr('src'); //grab original image
                new_src = $(this).attr('rel'); //grab rollover image
                $(this).attr('src', new_src); //swap images
                $(this).attr('rel', img_src); //swap images

                //Rebind hover (since we unbound it back up there ^^) to this *specific* element.
                //If you do $(".rollover") to rebind, it kills all the other existing binds and binds ONLY this element.
                $(this).hover(function(){
                        img_src = $(this).attr('src'); //grab original image
                        new_src = $(this).attr('rel'); //grab rollover image
                        $(this).attr('src', new_src); //swap images
                        $(this).attr('rel', img_src); //swap images
                        });
                }); 

        $(this).addClass("clicked");

    } 
});

$(".rollover").hover(function(){
      img_src = $(this).attr('src'); //grab original image
      new_src = $(this).attr('rel'); //grab rollover image
      $(this).attr('src', new_src); //swap images
      $(this).attr('rel', img_src); //swap images
    });

});
于 2012-09-05T21:41:38.357 に答える