0

我正在设计一个大型菜单，并想根据悬停的链接更新 div 内的图像。我要做的是等待代码的mouseleave部分，这样如果用户立即移动到下一个LI标记，则不会执行代码的mouseleave部分。但是如果用户在 2 秒内没有鼠标进入另一个LI，那么这个mouseleave代码就会被执行。

问题是 #1 可以返回值，但 #2 给出了一个“未定义”的值。为什么会这样，我该如何解决？如何获取当前悬停在 setTimeout 函数内的 LI 的属性？因为一旦我有了值，我就可以做一个比较来控制流量。非常感谢。

// FADE IN THE IMAGE ACCORDING TO THE MENU ITEM
// HTML=<li><a data-pos="left -256px" href="somelink">Link A</a></li>
var $sprite = $('#photo');

    $('li>a').hover(
        function() {
            sprite_pos=$(this).attr('data-pos');        // fetch value for the tag
            // Put an if otherwise this code gets executes for all li>a creating an unnecessary fade-in out effect
            if(typeof(sprite_pos)  != "undefined") {
                $sprite.fadeTo(200, 0, function() {
                $sprite.css("background-position",sprite_pos); });
                $sprite.fadeTo(200, 1);
            }
        },
        function() {

            //sprite_pos=$(this).attr('data-pos');          // #1

            setTimeout( function() {
                sprite_pos=$(this).attr('data-pos');        // #2 fetch value for the tag

            if(typeof(sprite_pos)  != "undefined" ) {
                $sprite.fadeTo(200, 0, function() {
                $sprite.css("background-position",default_pos); });
                $sprite.fadeTo(200, 1);
            }   // if(typeof(sprite_pos)  != "und ...
            }, 2000 );
        }

    );  // $('li>a').hover( ...
4

1 回答 1

0

当setTimeout被调用this时成为window对象。要修复，只需创建对原始this上下文的引用：

function() {

    var me = this;

    setTimeout( function() {

        sprite_pos=$(me).attr('data-pos');        // #2 fetch value for the tag
        ///          ^^

        /// ... rest of code
于 2013-07-25T00:17:22.743 回答