0

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

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

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

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

于 2012-09-03T04:44:49.343 回答
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

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

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 回答