用 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

用 javascript 在进度条的特定值上显示图标

show icon on certain value of progress bar with javascript

javascript

blade