1

在此页面上，3 条评论显示在 Bootstrap 轮播中。当您对评论进行分页时，<div>带有灰色背景的 应该调整大小以适应评论的长度。这工作得相当好，直到您绕过审查列表的末尾。

例如，如果您使用下一步按钮向前浏览评论，那么当您从最后一条评论 (#3) 转到第一个评论时，第一个评论下方会留下一个很大的空白区域。同样，如果您使用 prev 按钮向后浏览评论，那么当您从第一个评论转到最后一个（#3）时，评论的文本会溢出包含的 div（见下面的屏幕截图）。

总之，每当您环绕评论列表时，无论是使用 prev 按钮从 #1 转到 #3 还是使用 next 按钮从 #3 转到 #1），包含的 div 都没有正确调整大小。

当用户通过此轮播进行分页时调用的事件处理程序位于页面底部（为方便起见，此处转载）：

$(document).ready(function () {

    $('#reviewsCarousel').carousel({
        interval:null
    });

    // reviewsCarousel height animation and review counter (set .reviewCount to 
    // the amount of .item in #reviewsCarousel, on .nextReview or .prevReview button 
    // clicks: set the carousel-inner class to the animate to the height of the next 
    // item or the first item if there is no next item, on carousel slide, set the 
    // reviewIndex class text to the index position of the .active .item)
    $("#reviewsCarousel .reviewCount").html($('#reviewsCarousel .item').length);
    $("#reviewsCarousel .btn.nextReview").click(function () {
        var reviewHeight = $("#reviewsCarousel .item.active").next(".item").height();
        if (reviewHeight === undefined) {
            var reviewHeight = $("#reviewsCarousel .item").first(".item").height();
        }
        $("#reviewsCarousel .carousel-inner").animate({"height":reviewHeight + "px"}, 400);
        $('#reviewsCarousel').bind('slid', function () {
            $("#reviewsCarousel .reviewIndex").html($("#reviewsCarousel .active").index("#reviewsCarousel .item") + 1);
        });
    });
    $("#reviewsCarousel .btn.prevReview").click(function () {
        var reviewHeight = $("#reviewsCarousel .item.active").prev(".item").height();
        if (reviewHeight === undefined) {
            var reviewHeight = $("#reviewsCarousel .item").last(".item").height();
        }
        $("#reviewsCarousel .carousel-inner").animate({"height":reviewHeight + "px"}, 400);
        $('#reviewsCarousel').bind('slid', function () {
            $("#reviewsCarousel .reviewIndex").html($("#reviewsCarousel .active").index("#reviewsCarousel .item") + 1);
        });
    });

});

以下是显示问题的几个屏幕截图：

在此处输入图像描述 在此处输入图像描述

4

3 回答 3

1

我在控制台中尝试了一些东西：

$("#reviewsCarousel .item.active").next(".item").height();

并发现它是null。

if (reviewHeight === undefined) // It's never this.

你永远进不去if。undefined !== null:-)

只需使用：

if (!reviewHeight)

任何虚假值都足够好。

于 2012-12-20T10:02:52.423 回答
1

reviewHeight永远不会undefined

使用if (!reviewHeight)安装

于 2012-12-20T10:05:11.567 回答
1

也许最好不要对这个 if 语句使用严格的比较。试试吧

if (reviewHeight == undefined)

这也进入了 if 语句 if reviewHeight === null。

于 2012-12-20T10:08:54.300 回答