Question

我在网页上有很多人的照片，我想在鼠标悬停时显示一个人的替代照片，并让照片在鼠标移出时恢复为默认状态。我还希望当有人点击照片以查看他们的个人资料（显示在侧边栏上）时，会显示备用照片。当有人点击其他人时，系统会显示默认照片。我无法结合点击和悬停事件来实现这一目标。

这是我到目前为止所拥有的。我在那里聚会，但这并没有将之前查看过的个人资料图片恢复为默认照片。如果单击其他个人资料照片，如何从先前查看的个人资料中删除点击事件？

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

提前致谢。

Answer 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");

Answer 2

rel属性仅适用于锚点和链接标记。你应该尝试替代方案。我创造了一个小提琴here。让我们看看这是否是您正在寻找的。

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

});

JQuery悬停和单击事件

3 个答案: