Question

我正在玩自定义响应滑块的想法，并且很难让滑块容器调整“调整大小”。在初始加载时，所有值都是正确的，但是当我在调整大小时提示滑块时，我得到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);

});

Answer 1

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

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

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

看到这是真的

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

这样做的原因是你可以chain jQuery方法如果你不熟悉链接，请查看：Quick Guide: Chaining in 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);
});

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

使用jquery获取动态样式值

1 个答案: