Question

我正在尝试使用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));语句所示）只是没有隐藏它。

以下产生相同的错误：

    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中），但仍然没有成功。

我已经努力寻找答案，但还没有成功。任何建议将不胜感激。

Answer 1

你需要做这样的事情：

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

Answer 2

而不是使用其他人指出的get()返回实际的DOM节点，将jQuery集合减少到你想要的一个元素：

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

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

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

在setInterval函数

2 个答案: