使用javascript在进度条的某些值上显示图标

Question

我希望在我的进度条的值达到15时显示我的图标，而使用javascript更少：

我的progress栏：

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="{{($discount->products->stock * 100)/$discount->stock}}" aria-valuemin="0" aria-valuemax="100" style="width: {{($discount->products->stock * 100)/$discount->stock}}%;">
    {{$discount->products->stock}} remained
  </div>
</div>
<div class="flash-sale-progress-bar__fire"></div>

我希望<div class="flash-sale-progress-bar__fire"></div>仅在15之前我的值等于0时显示。

screenshot

Answer 1

使用Blade指令，您可以构造一个if语句。

@if($discount->products->stock > 0 && $discount->products->stock <= 15)
    <div class="flash-sale-progress-bar__fire"></div>
@endif