Question

在我的申请中，我有一个＆＃34;关注＆＃34;一旦他们点击另一个按钮我就会向用户显示的按钮＆＃34;跟随＆＃34;，就像Twitter一样。

我的小问题是当用户点击关注后，我会显示＆＃34;以下＆＃34;按钮，它立即更改为＆＃34;取消关注＆＃34;因为那是我附加的悬停事件。一些代码来说明：

$('.following').hover(
  function() {
      var $this = $(this);
      $this.val("Unfollow");
  },
  function() {
      var $this = $(this);
      $this.val("Following");
  }
);

这是因为＆＃34;以下＆＃34;按钮显示，它最终在光标后面，因此触发悬停事件。我想要实现的是某种方式来延迟这个悬停事件，直到鼠标指针第一次退出按钮然后返回它。 Twitter就是这样做的，我认为这是一个很好的UI改进。

Answer 1

    $('.follow').click(function(){          
        if($(this).attr("class") == "follow"){
            $(this).one("mouseleave",function(){
                $(this).mouseover(function(){
                    var $this = $(this);
                    $this.html("Unfollow");
                }).mouseout(function(){
                    var $this = $(this);
                    $this.html("Following");
                });
            });
        }else{
            $(this).off('mouseover mouseout');
            $(this).html('follow');
        }
        $(this).toggleClass("follow following");
    });

例如：http://jsfiddle.net/z3t5r3ud/
试试这个。
我更喜欢使用CSS，但是出于某些原因你可能必须使用javascript。

Answer 2

要模拟Twitter的UI以跟踪/取消关注用户，我建议您允许程序知道当前关注的状态。您可以使用变量或按钮上的data-属性来执行此操作。对于我在JSFiddle中的例子，我使用了一个变量来使它更快。

>> Live Example: JSFiddle

var isFollowing = false;
$(".following").click(function(){
    if(isFollowing == false) {
        isFollowing = true;
        $(this).html("Following");
    }
    else if (isFollowing == true) {
        isFollowing = false;
        alert("unfollowing!");
        $(this).html("Follow");
    }
});

$(".following").hover(
    function() {
        if (isFollowing == true) {
            $(this).html("Unfollow");
        }
    },
    function() {
        if (isFollowing == true) {
            $(this).html("Following");
        }
    }
);

-mbp

jQuery：延迟悬停直到第二次

2 个答案: