如何在使用if語句時在jquery中顯示寬度百分比

Question

我有一個由輸入字段控制的進度欄。當用戶更新數字時，進度條將縮放到該百分比。我試圖在進度條通過幕布百分比時突出顯示單詞。這怎麼能在JQuery中實現。

代碼：

HTML：

<div class="progress-container"> 
    <span class="progress-line" style="width:<?php the_field($post-name, $page-id); ?>%"></span> 
</div> 

<ul> 
    <li class="progress-asia">South East Asia</li> 
    <li class="progress-australia">Australia</li> 
    <li class="progress-new-zealand">New Zealand</li> 
    <li class="progress-america">America</li> 
    <li class="progress-home">Home</li> 
</ul> 

JQUERY：

$(window).load(function() { 
    var perc = $('.progress-line').width(); 

    if (perc > width('10%')) { 
     $('.progress-asia').addClass('progress-active'); 
    } 
}); 

Answer 1

試試這個：

$(window).load(function() { 
    var perc = $('.progress-line').width(), 
     container = $('.progress-container').width(); 

    // you need to compare the current progress width to the 
    // container progress width. 
    // the returned value is the % completed 
    perc = perc/container * 100; 
    if (perc > 10) { 
     $('.progress-asia').addClass('progress-active'); 
    } 
}); 

Answer 2

與整個文檔的大小比較：

if (perc > 0.1 * $(document).width()) {