Javascript 如何创建函数并向其传递变量？

我对js相当陌生，但不太熟悉jQuery，所以我不知道要搜索什么来回答我的问题，希望这里的人能帮我

简言之，我有一个非常简单的jQuery检查下一个和上一个元素。我想通过将函数分开，使它更整洁一些

以下是我当前的代码：

$(function() {

    $('.filmstrip img').on('click', function(){
        var new_src = $(this).attr('data-src');
        $('.mainView img.current').attr('src', new_src);

        //get the previous element's data source
        var prevImg = $(this).closest("li + *").prev().find('img').attr('data-src');
        if(prevImg === undefined){
            console.log('there isnt a prev img');
        }
        if(prevImg != undefined){
            console.log('the previous image is: '+prevImg);
        }

        //get the next element's data source
        var nextImg = $(this).closest("li + *").next().find('img').attr('data-src');
        if(nextImg === undefined & prevImg != undefined){
            console.log('You are at the last image');
        }
        if(nextImg != undefined){
            console.log('the next image is: '+nextImg);
        }

    });

});

以下是我的目标（注意：这并没有达到预期效果）：

我认为这不起作用的原因是因为它没有传递活动元素

---

我要说的是console.log：“没有prev img”。

在以前的实现中，每条语句都在事件处理程序下。您使用的

此

表示单击的元素。但是在函数的上下文中。这是不存在的因此解决方案是传入单击的元素

使用

---

在以前的实现中，每条语句都在事件处理程序下。您使用的

此

表示单击的元素。但是在函数的上下文中。这是不存在的因此解决方案是传入单击的元素

使用

---

您只需更改调用函数的方式：

$('.filmstrip img').on('click', function () {
    var new_src = $(this).attr('data-src');
    $('.mainView img.current').attr('src', new_src);
    getThePrevAndNextImages.call(this);
});

---

这样，您就可以将

this

作为当前上下文传递给

gettheprev和nextimages

函数。

您只需更改调用函数的方式：

$('.filmstrip img').on('click', function () {
    var new_src = $(this).attr('data-src');
    $('.mainView img.current').attr('src', new_src);
    getThePrevAndNextImages.call(this);
});

---

通过这种方式，您将

this

作为当前上下文传递给

getThePrevAndNextImages

函数。

因此问题基本上是getThePrevAndNextImages函数中的“this”引用。函数的调用方式在函数内部没有“this”

如果将第一个代码块更改为以下内容

$('.filmstrip img').on('click', function(){
    var new_src = $(this).attr('data-src');
    $('.mainView img.current').attr('src', new_src);
    getThePrevAndNextImages.apply(this);
});

那么它应该会起作用。这是您的代码片段，它稍微简化了一点，所以它不依赖于您特定的html结构，它只需要一行三个图像来演示我所说的内容

 $(function() {

    $('img').on('click', function() {
        getThePrevAndNextImages.apply(this);
    });

    function getThePrevAndNextImages(){

        var prevImg = $(this).prev('img');
        if(prevImg === undefined){
            console.log('there isnt a prev img');
        }
        if(prevImg != undefined){
            console.log('the previous image is: '+prevImg);
        }

        var nextImg = $(this).next('img');

        if(nextImg === undefined & prevImg != undefined){
            console.log('You are at the last image');
        }
        if(nextImg != undefined){
            console.log('the next image is: '+nextImg);
        }
    }

});

和一些html来运行它

<img src="/test1.jpg" id="test1"/>
<img src="/test2.jpg" id="test2"/>
<img src="/test3.jpg" id="test3"/>

---

把这些东西放到JSFIDLE中，它应该会工作。

所以问题基本上是getThePrevAndNextImages函数中的“this”引用。函数的调用方式在函数内部没有“this”

如果将第一个代码块更改为以下内容

$('.filmstrip img').on('click', function(){
    var new_src = $(this).attr('data-src');
    $('.mainView img.current').attr('src', new_src);
    getThePrevAndNextImages.apply(this);
});

那么它应该会起作用。这是您的代码片段，它稍微简化了一点，所以它不依赖于您特定的html结构，它只需要一行三个图像来演示我所说的内容

 $(function() {

    $('img').on('click', function() {
        getThePrevAndNextImages.apply(this);
    });

    function getThePrevAndNextImages(){

        var prevImg = $(this).prev('img');
        if(prevImg === undefined){
            console.log('there isnt a prev img');
        }
        if(prevImg != undefined){
            console.log('the previous image is: '+prevImg);
        }

        var nextImg = $(this).next('img');

        if(nextImg === undefined & prevImg != undefined){
            console.log('You are at the last image');
        }
        if(nextImg != undefined){
            console.log('the next image is: '+nextImg);
        }
    }

});

和一些html来运行它

<img src="/test1.jpg" id="test1"/>
<img src="/test2.jpg" id="test2"/>
<img src="/test3.jpg" id="test3"/>

---

把这些东西放到JSFIDLE中，它应该会工作。

是的。作为解释：关于活动元素，您是正确的。在

单击

事件处理程序的上下文中，

此

表示单击的元素。但是在函数的上下文中，

这个

没有。因此，解决方案是传入clicked元素@JacobM，我在用你的解释。谢谢。作为解释：关于活动元素，您是正确的。在

单击

事件处理程序的上下文中，

此

表示单击的元素。但是在函数的上下文中，

这个

没有。因此，解决方案是传入clicked元素@JacobM，我在用你的解释。非常感谢你在这件事上花时间，我完全明白了。谢谢。非常感谢你花时间在这件事上，我完全明白了。谢谢