jQuery .hide() 在 setInterval 函数中调用时不是函数错误答案

【问题标题】：jQuery .hide() is not a Function Error when Called in setInterval FunctionjQuery .hide() 在 setInterval 函数中调用时不是函数错误
【发布时间】：2017-05-10 23:57:22
【问题描述】：

我正在尝试使用 jQuery 创建一个非常简单的幻灯片。不幸的是，我收到以下错误：

TypeError: $(...).get(...).hide is not a function

我环顾了 Stack Overflow，但找不到我的答案。最初，我在 $(document).ready() 之外定义了 setTimeout 和 setInterval 中调用的函数，因为我认为它使代码更简洁。但是，在对错误进行一些研究之后，似乎代码在 $(document).ready() 之外可能是一个问题。但是，将它放在 $(document).ready() 函数中并不能解决问题。

$(document).ready(function () {
    var slideCount = 0;
    var currentSlide = 0;

    $("#slideshow").hide();

    var sliderTimeout = setTimeout(function () {


        $.ajax({
            type: "POST",
            url: "/Home/ShowSlideshow",
            dataType: "html",
            success: function (data) {
                if (data != null) {
                    $("#slideshow").html(data);
                    $("#slideshow").show();
                    $("#slideshow .slide").not(":first-child").hide();
                    slideCount = $("#slideshow .slide").length;

                    setInterval(function () {

                        alert($("#slideshow .slide").get(currentSlide));
                        $("#slideshow .slide").get(currentSlide).hide();


                        if (!(currentSlide >= slideCount)) {
                            $("#slideshow .slide").get(parseInt(currentSlide + 1)).show();
                            currentSlide++;
                        } else {
                            $("#slideshow .slide").get(0).show();
                            currentSlide = 0;
                        }
                    }, 2000);
                }
            },

            error: function (x, stat, er) {
                alert("Error " + stat + " " + er);
            }
        });
    }, 5000);

});

来自 ajax 请求的数据返回正常。它还正确执行了以下几行：

    $("#slideshow").show();
                $("#slideshow .slide").not(":first-child").hide();

只有进入setInterval函数才会出现问题。它发现元素很好（如alert($("#slideshow .slide").get(currentSlide));statement 所示）只是没有隐藏它。

以下产生相同的错误：

    function displaySlideshow() {

    $.ajax({
        type: "POST",
        url: "/Home/ShowSlideshow",
        dataType: "html",
        success: function (data) {
            if (data != null) {
                $("#slideshow").html(data);
                $("#slideshow").show();
                $("#slideshow .slide").not(":first-child").hide();
                slideCount = $("#slideshow .slide").length;

                setInterval(slide, 5000);
            }
        },
        error: function (x, stat, er) {
            alert("Error " + stat + " " + er);
        }
    });
}

function slide () {

    alert($("#slideshow .slide").get(currentSlide));
    $("#slideshow .slide").get(currentSlide).hide();


    if (!(currentSlide >= slideCount)) {
        $("#slideshow .slide").get(parseInt(currentSlide + 1)).show();
        currentSlide++;
    } else {
        $("#slideshow .slide").get(0).show();
        currentSlide = 0;
    }
}   


$(document).ready(function () {


    $("#slideshow").hide();

    var sliderTimeout = setTimeout(displaySlideshow, 5000);



});

我尝试将 setInterval 函数放在 ajax 成功回调之外（但在 setTimeout 内），但仍然没有成功。

我已努力寻找答案，但尚未成功。任何建议将不胜感激。

【问题讨论】：

.get() 从 jQuery 对象返回一个元素，而普通的 DOM 节点没有 .hide() 方法 - 这是一个 jQuery API。
.get() - “获取 jQuery 对象匹配的 DOM 元素。”...
除了@Pointy 的正确评论，如果你想要第一个，请使用.first() / :first 或.eq() / :eq() 为任何其他。
谢谢。我在想 get() 是一种 jQuery 方法（并且只是使用 [] 来访问纯 JavaScript 中的 DOM 元素）。在 DOM 元素上使用 .get(index) 和 [index] 有什么区别？

标签： javascript jquery

【解决方案1】：

你需要做这样的事情：

$($("#slideshow .slide").get(currentSlide)).hide();

【讨论】：

【解决方案2】：

不要使用get()（其他人指出它会返回实际的 DOM 节点），而是将 jQuery 集合缩减为您想要的一个元素：

$("#slideshow .slide").filter(":eq(" + currentSlide + ")").hide();

在您的情况下，您甚至可以将其缩短为：

$("#slideshow .slide:eq(" + currentSlide + ")").hide();

【讨论】：