jQuery: .width() возвращает процентное значение css до изменения размера окна, а затем возвращает ширину пикселя. Зачем?

Question

После console.logging черт из моего кода, я, наконец, создал проблему:

Я пытаюсь установить ширину пикселя некоторых вложенных див и везде говорят мне .width JQuery в() должен сделать Хитрость. Проблема в том, что при обновлении страницы возвращается процентное значение ширины div (как установлено в css). Когда я запускаю событие изменения размера окна, .width() начинает возвращать ширину пикселя!

Вот мой (очень упрощенный) HTML:

<div id="hud"> 
    <div class="character-position active" id="character-position-1" data-character-name="Character 1"> 
     <div class="character-tag" data-position="left"> 
     </div> 
    </div> 
    <div class="character-position active" id="character-position-2" data-character-name="Character 2"> 
     <div class="character-tag" data-position="right"> 
     </div> 
    </div> 
</div> 

Соответствующий CSS:

#hud { 
    position: relative; 
    width: 100%; 
} 

.character-position { 
    position: absolute; 
    width: 65%; 
} 

#character-position-1 { 
    left: 0% 
} 

#character-position-2 { 
    left: 39% 
} 

.character-tag { 
    position: absolute; 
    width: 22%; 
} 

И Javascript (все в готовом функции JQuery):

$(window).resize(resizeLocationComponent); 

function resizeLocationComponent() { 
     var windowWidth = $(window).width(); 
     $('#hud').css('height', ((windowWidth - 8) * 0.5625) + 'px'); 
     positionHudElements(); 
    } 

positionHudElements = function() { 
      var windowWidth = $(window).width(); 
      $characterPositions = $('.character-position.active'); 
      $.each($characterPositions, function(index) { 
       var $tag = $(this).find('.character-tag'); 

       console.log("character position of "+$(this).attr('data-character-name')+" = "+$(this).css('left')+", "+$(this).css('top')); 
       var percentX = parseInt($(this).css('left').replace('%', '')); 
       var percentY = parseInt($(this).css('top').replace('%', '')); 
       var windowHeight = windowWidth * 0.5625; 
       var positionX = (percentX * windowWidth)/100; 
       var positionY = (percentY * windowHeight)/100; 
       var positionWidth = $(this).width(); 
       var tagWidth = $tag.width(); 
       var headSideOffset = parseInt(positionWidth * 0.35); 
       console.log("windowWidth = "+windowWidth); 
       console.log("character position of "+$(this).attr('data-character-name')+" = "+positionX+", "+positionY); 

       console.log("characterPosition.width() = "+positionWidth); 
       console.log("headSideOffset = "+headSideOffset); 
       console.log("$tag.width() = "+tagWidth); 
       var xOffset = 0; 
       if ($tag.attr('data-position')=="left") { 
        xOffset = headSideOffset - tagWidth; 
        $tag.css('left', xOffset+'px'); 
       } else { 
        xOffset = headSideOffset - tagWidth; 
        $tag.css('right', xOffset+'px'); 
       } 
       console.log("xOffset = "+xOffset); 
      }); 

    } 

positionHudElements также вызывается при загрузке страницы, так что это не значит, что он не вызывается до события изменения размера. Я вижу, где функция вызывается в моем коде, и я вижу журналы консоли из функции positionHudElements, когда страница обновляется.

Любые идеи, почему .width() вернет проценты css до изменения размера окна и ширины пикселей после?

Спасибо.

Answer 1

Проверьте этот код:

function resizeLocationComponent() { 
     var windowWidth = $(window).width(); 
     // $('#hud).css('height', ((windowWidth - 8) * 0.5625) + 'px'); You missed a inverted comma 
     $('#hud').css('height', ((windowWidth - 8) * 0.5625) + 'px'); 
     positionHudElements(); 
    } 

U нужно использовать

$('#hud').css('height', ((windowWidth - 8) * 0.5625) + 'px');