jQuery:正确的绑定方式();和取消绑定();使用鼠标悬停、鼠标退出和单击

Question

我正在使用jQuery制作交互式地图，并遇到了一些无法解决的问题。

1. 基本上，当我单击黑色方块时，我希望它立即变成红色，现在它的工作相反（从第二次单击开始变为红色）。有没有办法逆转 fadeToggle（）; 函数？但是，我仍然想在鼠标悬停和鼠标退出事件上继续淡入淡出动画。

2. 第二个问题是，在"单独"单击黑色方块或单击左侧的"选项链接"后，它会变成红色，但当我将鼠标悬停在它上面时不会保持红色。（我想在单击正方形后以某种方式取消绑定鼠标悬停和鼠标退出事件）。并且只有当我再次单击它时，才将其淡出为 0。

演示：http://jsfiddle.net/antondesign/8JHCe/

j查询脚本

$('ul.list li a').click(function(e) {
    e.preventDefault();
    var productTitle = $(this).attr("title");
        $('.p-'+ productTitle).siblings().hide();
        $('.p-'+ productTitle).stop(true, true).animate({ opacity: "show" }, "slow");
        $('.p-'+ productTitle).unbind('mouseover mouseout');     
    });
// Check if map exists
if($('#map')) {
    // Loop through each AREA in the imagemap
    $('#map area').each(function() {
        var productIcon = $(this).attr('id').replace('area-', '');   
        // Assigning an action to the click event
        $(this).click(function(e){  
            e.preventDefault();              
            $('#'+productIcon).stop(true, true).fadeToggle('slow', function(e){
            $(this).unbind('mouseover').unbind('mouseout');
            });
        });            
    // Assigning an action to the mouseover event
        $(this).bind("mouseover", function(e) {
            $('#'+productIcon).stop(true, true).fadeTo(500, 1);
            e.preventDefault();
         });
    // Assigning an action to the mouseout event
        $(this).bind("mouseout", function(e) {
            $('#'+productIcon).stop(true, true).fadeOut(500, 0);
            e.preventDefault();
        });
   });
}

Answer 1

您可以将某个类应用于单击的元素，然后在鼠标悬停和鼠标退出事件中，在淡出或执行任何操作之前检查是否应用了该类。我已经更新了您的jsfiddle代码，您可以在此处查看：

http://jsfiddle.net/8JHCe/8/

希望这有帮助。