在我的申请中,我有一个"关注"一旦他们点击另一个按钮我就会向用户显示的按钮"跟随",就像Twitter一样。
我的小问题是当用户点击关注后,我会显示"以下"按钮,它立即更改为"取消关注"因为那是我附加的悬停事件。一些代码来说明:
$('.following').hover(
function() {
var $this = $(this);
$this.val("Unfollow");
},
function() {
var $this = $(this);
$this.val("Following");
}
);
这是因为"以下"按钮显示,它最终在光标后面,因此触发悬停事件。我想要实现的是某种方式来延迟这个悬停事件,直到鼠标指针第一次退出按钮然后返回它。 Twitter就是这样做的,我认为这是一个很好的UI改进。
答案 0 :(得分: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。
答案 1 :(得分:0)
要模拟Twitter的UI以跟踪/取消关注用户,我建议您允许程序知道当前关注的状态。您可以使用变量或按钮上的data-
属性来执行此操作。对于我在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