PHPのパフォーマンスバーがいっぱいではありません

Question

私はパフォーマンスバーを作ろうとしていて、ホイールの統計情報も見ています。しかし、それはバーを埋めるが、ちょうど私が埋めるんでした数を出していない。ここ

は、私が使用していたコードです：私は高度なカスタムフィールドと呼ばれるWordPressのプラグインを使用しています

<?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> 

、どこのthats私は値を得る。

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');