方框

Question

我有以下网站（查看我的附件），有4个方框。激活特定状态时，将启用所有框。

在此示例中，我有以下状态： - 1.1 =（前1代表方框1，第二位代表：我要激活哪个背景红色（数字：0）或绿色（数字：1）。在我的例子中，我激活了绿色框。赞：{{ 1}}（数字1）和addClass('list-group-item-success');（数字0）

我想要的是所有盒子。示例：如果我的系统推送状态：3.1，那么我希望系统为方框1到3（绿色，成功）的背景着色。

另一个例子：如果状态是：4.0。然后所有1到3的方框都需要涂成绿色（成功），第4个方框需要是红色（类危险）。

这怎么可能？

当前HTML

addClass('list-group-item-warning');

jQuery :(这根本不起作用，因为它只是着色盒1）。

<div class="list-group">
  <a href="" id="psLoggedIn" data-toggle="modal" class="list-group-item list-group-item-action flex-column align-items-start disabled">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1"><strong>Voorgemeld</strong> <span id="psStatusLoggedIn" class="badge"></span></h5>
      <small id="psSignLoggedIn" class="text-muted"></small>
    </div>
    <p class="mb-1">Uw pakket is aangemeld bij de vervoerder en is bekend.</p>
    <small id="psInfoLoggedIn"></small>
  </a>
  <a href="" id="psDepot" data-toggle="modal" class="list-group-item list-group-item-action flex-column align-items-start disabled">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1"><strong>In depot</strong> <span id="psStatusDepot" class="badge"></span></h5>
      <small id="psSignDepot" class="text-muted"></small>
    </div>
    <p class="mb-1">Zending bevindt zich in een centraal depot. Zending wordt gesorteerd naar uw regio.</p>
    <small id="psInfoDepot"></small>
  </a>
  <a href="" id="psInTransit" data-toggle="modal" class="list-group-item list-group-item-action flex-column align-items-start disabled">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1"><strong>Onderweg</strong> <span id="psStatusInTransit" class="badge"></span></h5>
      <small id="psSignInTransit" class="text-muted"></small>
    </div>
    <p class="mb-1">Zending is onderweg voor aflevering op uw adres.</p>
    <small id="psInfoInTransit"></small>
  </a>
  <a href="" id="psDelivered" data-toggle="modal" class="list-group-item list-group-item-action flex-column align-items-start disabled">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1"><strong>Geleverd</strong> <span id="psStatusDelivered" class="badge"></span></h5>
      <small id="psSignDelivered" class="text-muted"></small>
    </div>
    <p class="mb-1">Zending is geleverd</p>
    <small id="psInfoDelivered"></small>
  </a>
</div>

Answer 1

嗯，这可能不是很漂亮，但它确实有效，实际代码很短：

var steps=$('a div.d-flex','.list-group'); // collect the divs to be colored ...
$('input#code').keyup(function(){var fld,col;
  [fld,col]=$(this).val().split('.');  // parse code into fld and col
                                       // only step into action for valid codes ...
  if (fld>0&&fld<5&&(col==='0'||col==='1')){
    // first: remove all "success" and "warning" classes 
    steps.removeClass('list-group-item-success list-group-item-warning')
    // then: assign success to all but the last step
         .slice(0,fld-1).addClass('list-group-item-success');  
    // assign the last step ("warning" or "success", according to col)
    steps.eq(fld-1).addClass('list-group-item-'+['warning','success'][col]);        
  }
})

.list-group-item-success {background-color:#cfc}
.list-group-item-warning {background-color:#fcc}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input id="code" placeholder="enter code here"/><br>
<div class="list-group">
  <a href="" id="psLoggedIn" data-toggle="modal" class="list-group-item list-group-item-action flex-column align-items-start disabled">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1"><strong>Voorgemeld</strong> <span id="psStatusLoggedIn" class="badge"></span></h5>
      <small id="psSignLoggedIn" class="text-muted"></small>
    </div>
    <p class="mb-1">Uw pakket is aangemeld bij de vervoerder en is bekend.</p>
    <small id="psInfoLoggedIn"></small>
  </a>
  <a href="" id="psDepot" data-toggle="modal" class="list-group-item list-group-item-action flex-column align-items-start disabled">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1"><strong>In depot</strong> <span id="psStatusDepot" class="badge"></span></h5>
      <small id="psSignDepot" class="text-muted"></small>
    </div>
    <p class="mb-1">Zending bevindt zich in een centraal depot. Zending wordt gesorteerd naar uw regio.</p>
    <small id="psInfoDepot"></small>
  </a>
  <a href="" id="psInTransit" data-toggle="modal" class="list-group-item list-group-item-action flex-column align-items-start disabled">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1"><strong>Onderweg</strong> <span id="psStatusInTransit" class="badge"></span></h5>
      <small id="psSignInTransit" class="text-muted"></small>
    </div>
    <p class="mb-1">Zending is onderweg voor aflevering op uw adres.</p>
    <small id="psInfoInTransit"></small>
  </a>
  <a href="" id="psDelivered" data-toggle="modal" class="list-group-item list-group-item-action flex-column align-items-start disabled">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1"><strong>Geleverd</strong> <span id="psStatusDelivered" class="badge"></span></h5>
      <small id="psSignDelivered" class="text-muted"></small>
    </div>
    <p class="mb-1">Zending is geleverd</p>
    <small id="psInfoDelivered"></small>
  </a>
</div>