幫助jQuery問題

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元素，但事實上，它是一流的更改不會解除綁定的mousenter和mouseleave事件處理程序（這是盤旋實際結合） 。

然而，.live()評估如果類匹配當您懸停（因爲它的工作原理關閉事件冒泡，所以它會檢查是否選擇執行前一致），並會做你想做的，是這樣的：

$(".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次）元素......而是隻運行一次除了現在的任何循環之外，它應該直接在document.ready處理程序中。

編輯：您可以縮短這個問題，以及因爲你只是切換元件周圍，使用.toggle()，這是相同的效果，只是有點簡單/更簡潔：

$(".item:not(.voted)").live('mouseenter mouseleave', function() { 
    $(".ratingbar, .votebar", this).toggle(); 
}); 

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