javascript - 如何在 jQuery 中调试预期的 DOM 行为？

Question

我有这个代码:

$('.user_info').click(function(){
    var pos = $(this).offset();
    rel_value = $(this).attr('rel');

    $('#' + rel_value).css({top: pos.top + 'px', left: pos.left + 'px'});
    $('#' + rel_value).show('slow');

    $('#' + rel_value).hover(function(){}, function(){
        $(this).fadeOut('slow');
    });

    return false;
});

当我单击类 user_info 的链接时，它显示由 '#' + rel_value 标识的 div。问题是 div 显示但同时淡出 ($(this).fadeOut('slow');)，即使我在 mouseout 参数中指定了它。

我想要的是 div 应该只在鼠标离开它的区域时消失。如何做到这一点？

编辑

奇怪，相同的代码在 jsbin 上有效，但在我的页面上却无效:jQuery 版本也相同。

http://jsbin.com/epifu3

Answer 1

消失是正常的，因为当你点击element1时，你的鼠标是在element1上，而不是在element2('#' + rel_value)上。

试试这个:将一个类(例如:“tobeShown”)添加到所有具有您通常通过 '#' + rel_value 设置的 id 的元素，并附加 hover() 行为与您的点击功能分开。

$('.tobeShown').hover(function(){}, function(){
        $(this).fadeOut('slow');
    });

$('.user_info').click(function(){
    var pos = $(this).offset();
    rel_value = $(this).attr('rel');

    $('#' + rel_value).css({top: pos.top + 'px', left: pos.left + 'px'});
    $('#' + rel_value).show('slow');
    return false;
});