javascript - jQuery height() 函数不适用于元素

Question

我目前正在组装一个 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 的内容中。问题是我无法使用 width()、height() 设置 this.scroller 的 CSS 宽度或高度或 css() 函数。

我错过了什么？我整理了一个 jsFiddle来证明问题。如果您检查元素检查器，您会发现 div.carousel_scroll_inner 元素的尺寸永远不会更新。

Answer 1

问题是，这里:

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);