Question

我有一个包含项目列表的简单页面。我允许用户对这些项目进行投票，但我只想让用户每次投票一次。项目。

我制作了一个jQuery脚本，为用户投票的项目添加了一个类：

if(!$(this).find(".item span").hasClass("voted")) {
  $(".item").hover(function() {
    $(this).find(".ratingbar").hide();
    $(this).find(".votebar").show();
  }, function() {
    $(this).find(".votebar").hide();
    $(this).find(".ratingbar").show();
  });
};

这是阻止用户再次对同一项目进行投票的脚本。

$(".votebutton").click(function() {
  $("div#"+offerid).find(".item").addClass("voted");
});

这不起作用。当悬停项目时，即使第二个脚本成功将“已投票”类添加到html，悬停功能仍会运行。

为什么会这样？

Answer 1

你需要使用.live()（或.delegate()）来防止这种情况，因为.hover()附加到DOM元素，它的类更改不会解除绑定{{1} }和mousenter事件处理程序（这是hover实际绑定的内容）。

然而，.live()评估当你悬停时类是否与匹配（因为它在事件冒泡时起作用，因此它会在执行前检查选择器是否匹配），并且会执行你想要的操作，像这样：

mouseleave

没有理由执行$(".item:not(.voted)").live('mouseenter', function() { $(this).find(".ratingbar").hide(); $(this).find(".votebar").show(); }).live('mouseleave', function() { $(this).find(".votebar").hide(); $(this).find(".ratingbar").show(); });语句，这适用于所有元素，您应该只运行一次。以前它正在检查当前项是否具有if类...但是然后将悬停应用于所有voted（.item次）元素每个没有这个类的人...而不是在你现在所处的循环之外运行一次，它应该直接在n处理程序中。

编辑：您也可以缩短这一点，因为您只是使用.toggle()切换元素，它的效果相同，只是更简单/更简洁：

document.ready

Answer 2

您稍后会在代码中添加课程voted，但您的.hover()已将事件mouseenter和mouseleave绑定到.item。

如果你希望你的事件处理程序停止继续，如果元素有voted类，你可以检查类并从事件处理程序提前返回：

$(".item").hover(function() {
  // save this variable so we don't need to call $() three times
  var $this = $(this);
  // stop processing the event if the item has the 'voted' class
  if ($this.is('.voted')) return; 

  $this.find(".ratingbar").hide();
  $this.find(".votebar").show();
}, function() {
  var $this = $(this);
  // note - you might still want to process this event as they mouse out after voting?
  if ($this.is('.voted')) return; 

  $this.find(".votebar").hide();
  $this.find(".ratingbar").show();
});

投票后

或，您可以删除事件处理程序：

$(".votebutton").click(function() {
  $("div#"+offerid).find(".item").addClass("voted").unbind('mouseenter mouseleave');
});

帮助解决jQuery问题

2 个答案: