JQuery 悬停和单击事件答案

【问题标题】：JQuery hover and click eventJQuery 悬停和单击事件
【发布时间】：2012-09-03 03:12:44
【问题描述】：

我在一个页面上有许多人的照片，我想在鼠标悬停时显示一个人的备用照片，并在鼠标移出时将照片恢复为默认值。我还希望在有人单击照片以查看其个人资料（显示在侧边栏上）时显示备用照片。当有人点击其他人时，将为该人显示默认照片。我无法结合点击和悬停事件来实现这一点。

这是我目前所拥有的。我在那里聚会，但是这不会将以前查看的个人资料图片恢复为其默认照片。当点击不同的个人资料图片时，如何从以前查看的个人资料中删除点击事件？

    $('.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
    });

提前致谢。

【问题讨论】：

标签： jquery

【解决方案1】：

您可以使用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");

【讨论】：

感谢您的回复，但这缺少取消绑定事件。我用我的进度更新了我的问题。

【解决方案2】：

rel 属性仅适用于锚点和链接标签。你应该尝试另一种选择。我创建了一个小提琴here。让我们看看这是否是您想要的。

【讨论】：

【解决方案3】：

这就是我最终做的事情，并且按照我的意愿工作。可能有一种方法可以简化这一点，我愿意接受建议。感谢回复的人。

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
    });

});

【讨论】：