Question

我的代码中有这个功能，它可以作为类中元素的滑块我想在点击事件上setInterval，但一直给我功能未定义。

这是我的剧本：

$(document).ready(function(){
    $(".slide").click(
        setInterval( function fadeNext() {
            $(this).children('div:nth(0)').children('img:nth(0)').fadeOut().appendTo($(this).children("div:nth(1)"));
            $(this).children("div:nth(1)").children('img:nth(0)').fadeIn().appendTo($(this).children("div:nth(0)"));
        },1000)
    );
});

Answer 1

在setInterval函数中，this属于匿名函数，而不是单击函数。所以你需要在间隔中传递this。解决方案是在匿名函数上使用bind

$(document).ready(function () {
$(".slide").click(function(){
    setInterval(function fadeNext() {
        $(this).children('div:nth(0)').children('img:nth(0)').fadeOut().appendTo($(this).children("div:nth(1)"));
        $(this).children("div:nth(1)").children('img:nth(0)').fadeIn().appendTo($(this).children("div:nth(0)"));
    }.bind(this), 1000)
)
});
});

或者只是

$(document).ready(function () {
$(".slide").click(function(){
var _this = this;
    setInterval(function fadeNext() {
        $(_this).children('div:nth(0)').children('img:nth(0)').fadeOut().appendTo($(this).children("div:nth(1)"));
        $(_this).children("div:nth(1)").children('img:nth(0)').fadeIn().appendTo($(this).children("div:nth(0)"));
    }, 1000)
)
});
});

Answer 2

可以尝试使用jQuery延迟和fadeOut回调。我自己没有测试过。

$(document).ready(function(){
    $(".slide").click(function () {
            $(this)
                .children('div:nth(0)')
                    .children('img:nth(0)')
                    .delay(1000);
                    .fadeOut(400, function(){
                        $(this).appendTo($(this).children("div:nth(1)"));
                    });
    });
});

setInterval一直给我未定义的功能

2 个答案: