Question

我有这个代码块，就像我想要的那样工作但是我想把它变成一个函数并在这里和那里重用它。下面是我转换成函数后的工作代码。但是我做错了，因为它不起作用。

工作

$('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）'。谢谢！

Answer 1

将其更改为：

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

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

Answer 2

尝试此更改：

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

并将对x的所有引用更改回this。这样，函数中的this就是您单击的按钮。此时，您定义为x的是click函数的事件，而不是之前的this元素。

执行此操作时您正在执行的操作是将函数引用传递给单击处理程序，这与传递函数本身相同。而不是

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

你只是告诉它去找功能并使用它。还要注意在上面的“匿名函数”中使用命名函数。这总是帮助我稍后进行堆栈调试“我从哪里再次调用它......”。

你做错的第二件事：在第一件事中，你传递了一个this而在第二件事中，你传递了一个$(this)，你可以在后一个函数中绕过它（并留下一切）别的）通过添加这一行：

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

但我不会这样做。我只想改变第一个。

如何将这个混乱的代码块转换为函数

2 个答案: