jquery를 사용하여 동적 스타일 값 가져 오기

Question

사용자 지정 반응 형 슬라이더 아이디어로 놀고 있는데 슬라이더 컨테이너가 "크기 조정"을 조정하는 데 어려움이 있습니다. intial load에서 모든 값은 정확하지만, resize에 sliderwid에 경고 할 때 NaN을 얻습니다 ... 왜 크기가 아니라로드에서는 작동합니까? 코드는 크기 조정에

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 ING (또는 더 나은 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); 
}); 

적어도 나는 이것이 당신이하려는 일이라고 생각합니다.