Question

我是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);
        }

    });

});

这就是我的目标（注意：这不能按预期工作）：

$(function() {

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

    function getThePrevAndNextImages(){
        //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的看法是：“没有一个普通的img”。

Answer 1

在您之前的实现中，每个语句都在事件处理程序下。使用this表示所单击元素的位置。但在功能的背景下。这不存在。 因此解决方案是传入点击的元素。

使用

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

    function getThePrevAndNextImages(obj) {
        //get the previous element's data source
        var prevImg = $(obj).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 = $(obj).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);
        }
    }
});

Answer 2

所以问题基本上是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"/>

将这些内容放入jsfiddle，它应该可以工作。

Answer 3

你应该改变调用函数的方式：

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

这样您就可以将this作为当前上下文传递给getThePrevAndNextImages函数。

如何创建一个函数并将变量传递给它？

3 个答案: