PHP性能栏并未填充

Question

我正在尝试使性能栏也看到轮子的统计图。但它不填充栏，但只是把出我没有填数

这里是我使用的代码：

<?php 

if(have_rows('details')): ?> 

<?php while (have_rows('details')) : the_row();?> 

<div class="container"> 
<h2>Performance Chart</h2> 
<div class="progress" id="prog1"> 
<?php $areo = the_field('areo'); 
     $stiffness = the_field('stiffness'); 
     $weight = the_field('weight'); 
     $comfort = the_field('comfort'); 

?> 
    <div class="progress-bar" role="progressbar" aria-valuenow="70" 
    aria-valuemin="0" aria-valuemax="100" > 
    <span>Areo</span> 
    </div> 
    </div> 
<div class="progress" id="prog2"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="40" 
    aria-valuemin="0" aria-valuemax="100" > 
    <span>Stiffness</span> 
    </div> 
    </div> 
    <div class="progress" id="prog3"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="90" 
    aria-valuemin="0" aria-valuemax="100" > 
    <span>Weight</span> 
    </div> 
    </div> 
    <div class="progress" id="prog4"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="30" 
    aria-valuemin="0" aria-valuemax="100" > 
    <span>Comfort</span> 
    </div> 
    </div> 
</div> 
</div> 
<?php endwhile; 

else : 

    // no rows found 

endif;?> 
<script src="<?php echo THEME_URL?>/js/jquery-2.1.4.min.js" ></script> 

<script type="text/javascript"> 
(function($){ 
    $(document).ready(function(){ 
     function progress(percent, $element) { 
      var progressBarWidth = percent * $element.width()/100; 
      $element.find('div.progress-bar').animate({ width: progressBarWidth }, 500); 
     } 
     progress(<?php echo $areo ?>, $('#prog1')); 
     progress(<?php echo $stiffness ?>, $('#prog2')); 
     progress(<?php echo $weight ?>, $('#prog3')); 
     progress(<?php echo $comfort ?>, $('#prog4')); 
    }); 
})(jQuery); 
</script> 

我使用了一个名为高级自定义字段WordPress插件，多数民众赞成在我从中获得价值。

Answer 1

我不确定你想实现什么，但你的代码似乎工作，请参阅下面的代码片段。

function progress(percent, $element) { 
 
    var progressBarWidth = percent * $element.width()/100; 
 
    $element.find('div.progress-bar').animate({ 
 
    width: progressBarWidth 
 
    }, 500); 
 
} 
 

 
progress(30, $('#prog4'));

div.progress-bar { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="progress" id="prog4"> 
 
    <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"> 
 
    <span>Comfort</span> 
 
    </div> 
 
</div>

也许你只是错过了设置在progress-bar背景或必须增加动画的时间。

---

只是望着the_field

显示指定字段的值的文档。此功能与echo get_field($field_name);

所以看起来，您没有得到相应字段的值，而是在HTML输出中显示它。要检索的字段的值，你应该宁愿使用get_field

返回指定字段的值。

所以你的情况，这将是

$areo = get_field('areo'); 
$stiffness = get_field('stiffness'); 
$weight = get_field('weight'); 
$comfort = get_field('comfort');