3

現在、jQuery タッチ カルーセルを作成中です。ただし、要素の高さ (または幅) を設定するときに少し問題が発生したようです。

以下は、関数からの関連コードです。

carousel = function( container, options )
{
    this.settings = $.extend({

        // General settings:
        width: 600,
        height: 400,
        slides: 'div',
        snapTo: true,
        mouseSupport: true,
        trackMovement: true,
        slideWidth: 600,
        slideHeight: 400,

        // CSS classes:
        wrapperCls: 'carousel_wrapper',
        innerCls: 'carousel_scroll_inner'

    }, options);

    this.container = container;
    this.scroller = null;
    this.slides = this.container.children(this.settings.slides);
    this.numSlides = this.slides.length;
    this.scrollWidth = this.settings.width * this.numSlides;

    this.container.addClass(this.settings.wrapperCls);
    this.scroller = $('<div />').addClass(this.settings.innerCls);
    this.container.wrapInner(this.scroller);

    this.scroller.width(1500)

    this.scroller.css('width', this.scrollWidth);
    this.container.css({ width: this.settings.width, height: this.settings.height });
};

これは、次のようなことを行うことで呼び出されます。

$(function() {
    var carousel1 = new carousel($('#myElement'));
});

#myElement確実に存在し、エラーはスローされません。this.scrollerのコンテンツにラップされた正しい jQuery オブジェクトも含まれていますthis.container。問題は、または関数this.scrollerを使用して CSS の幅または高さを設定できないことです。width()height()css()

私は何が欠けていますか？問題を示すためにjsFiddleをまとめました。要素インスペクタを確認すると、要素の寸法が更新されていないことがわかりますdiv.carousel_scroll_inner。

4

1 に答える 1

3

問題は、ここにあります：

this.container.wrapInner(this.scroller);

jQueryはコピーを使用します。したがってthis.scroller、下にあるものに同じ要素がラップされているわけではありませんthis.container。試す：

this.container.addClass(this.settings.wrapperCls);
this.scroller = $('<div />').addClass(this.settings.innerCls);
this.scroller.append(this.container.contents());
this.container.append(this.scroller);
于 2013-02-07T12:42:29.930 に答える