1

我正在玩自定义响应滑块的想法，并且很难让滑块容器在“调整大小”时进行调整。在初始加载时，所有值都是正确的，但是当我在调整大小时提醒 sliderwid 我得到 NaN ... 为什么它在加载时起作用但在调整大小时不起作用？代码完全一样... Thx

var winwid = $(window).width();
    $('.panel').width(winwid);
var panelwid = $('.panel').css('width');
var panels = $('.panel').length;
var sliderwid = parseInt(panels) * parseInt(panelwid)
    $('.slider').width(sliderwid);

$(window).on('resize', function(){
    var winwid = $(window).width();
    var panelwid = $('.panel').width(winwid);

    var panels = $('.panel').length;
    var sliderwid = parseInt(panels) * parseInt(panelwid)

    //alert(sliderwid);
    //$('.slider').width(sliderwid);

});
4

1 回答 1

0

调整大小的问题是您正在设置panelwid宽度值，但这会返回一个 jQuery 对象。在加载时，您将获得实际返回整数的面板宽度。

var panelwid = $('.panel').width(winwid); // Returns a jQuery Obj
var sliderwid = parseInt(panels) * parseInt(panelwid); // Not a number here

您可以通过alerting （或更好console.log）panelwid

alert($('.panel').width(winwid));
// Outputs [object Object]
console.log($('.panel').width(winwid));
// Outputs an array with the DOM element

这样做的原因是您可以chain使用 jQuery 方法如果您不熟悉链接，请查看：快速指南：jQuery 中的链接

修复：

$(window).on('resize', function(){
    var winwid = $(window).width();
    var $panel = $('.panel');  // Cache the selector
        $panel.width(winwid); // Set the width as in onLoad
    var panelwid = $panel.width(); // return the width - use jQuery to get it without units
    // could be shortened to panelwid = $panel.width(winwid).width();

    var panels = $panel.length;
    var sliderwid = parseInt(panels) * parseInt(panelwid);

    $('.slider').width(sliderwid);
});

至少我认为这就是你想要做的。

于 2013-08-23T23:03:45.170 回答