1

我有这段代码可以按我的意愿工作，但我想把它变成一个函数并在这里和那里重用它。下面是我转换为函数的工作代码。但我做错了什么，因为它不起作用。

在职的

$('div.destination a').click(function(){
    $('html, body').stop(true,false).animate({
        scrollLeft: $( $.attr(this, 'href') ).offset().left 
                        - 1/2 * $(window).width() 
                        + 1/2 * $( $.attr(this, 'href') ).width()
    },
    {
        duration: (Math.abs( $( $.attr(this, 'href') ).offset().left 
                    - $(document).scrollLeft() )) 
                    / 1000 
                    / spaceScaleFactor 
                    / travelRate,
        easing: 'linear',
        queue: false
    });
    $('div.destination').prev().children().children().text(($.attr(this, 'href')).substring(1));
    return false;
});

函数并在单击时调用它（不起作用）

// Make the function and replace 'this' with 'x'

function travelToDestination (x) {
        $('html, body').stop(true,false).animate({
            scrollLeft: $( $.attr(x, 'href') ).offset().left 
                            - 1/2 * $(window).width() 
                            + 1/2 * $( $.attr(x, 'href') ).width()
        },
        {
            duration: (Math.abs( $( $.attr(x, 'href') ).offset().left 
                        - $(document).scrollLeft() )) 
                        / 1000 
                        / spaceScaleFactor 
                        / travelRate,
            easing: 'linear',
            queue: false
        });
        $('div.destination').prev().children().children().text(($.attr(x, 'href')).substring(1));
        return false;
    });
}

//call the function on click using '$(this)' as a parameter

$('div.destination a').click(function(){
    travelToDestination($(this));
}

就像我说的那样，代码可以正常工作。我只是想知道当我尝试使它成为一个函数时我做错了什么。'this' 可能不等于 '$(this)'。谢谢！

4

2 回答 2

4

将其更改为：

$('div.destination a').click(function(){
    travelToDestination(this);
}

由于您替换this为x，因此它期望参数是 DOM 元素，而不是包装在 jQuery 对象中。

于 2013-10-18T00:16:04.133 回答
0

Try this change:

$('div.destination a').click(travelToDestination);

and change all references to x back to this. This way the this in your function is the button you clicked. At that point, what you have defined as x is the event of the click function, not the this element you had previously.

What you're doing when you do this is passing a function reference to the click handler, which is the same as passing the function itself. So instead of 

$(selector).click(function _travelToDestination_inlineFunction(){ /* stuff */ })

you're just telling it to go find the function and use that. Also note the use of the named function in my "anonymous function" above. That always helps me with stack debugging later "where did I call that from again ..".

Second thing you did wrong: In the first one you're passing a this and in the second one you're passing a $(this) which you could bypass in the latter function (and leaving everything else alone) by adding this line:

function travelToDestination (me) {
    x = me[0]; //I added this line
    $('html, body').stop(true,false).animate({

but I wouldn't do that. I would just alter the first one.

于 2013-10-18T00:12:39.630 回答