1

このページでは、Bootstrap カルーセルに 3 件のレビューが表示されます。レビューのページをめくる<div>と、灰色の背景の がレビューの長さに合わせてサイズ変更されます。これは、レビュー リストの最後をラップするまではかなりうまく機能します。

たとえば、[次へ] ボタンを使用してレビューを進めた場合、最後のレビュー (#3) から最初のレビューに移動すると、最初のレビューの下に大きな空白が残ります。同様に、前のボタンを使用してレビューをさかのぼる場合、最初のレビューから最後のレビュー (#3) に移動すると、レビューのテキストが含まれている div からはみ出します (下のスクリーンショットを参照)。

要約すると、前のボタンを使用して #1 から #3 に移動するか、次のボタンを使用して #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

reviewHeight決してなりませんundefined

使用if (!reviewHeight)する

于 2012-12-20T10:05:11.567 に答える
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

おそらく、この if ステートメントでは厳密な比較を使用しない方がよいでしょう。代わりに試す

if (reviewHeight == undefined)

これも if 文 if に入りreviewHeight === nullます。

于 2012-12-20T10:08:54.300 に答える