jquery - 循环遍历javascript数组，如果key等于或小于则输出值

Question

我正在尝试使用 JavaScript 数组中的值自动填充单价输入。

但由于某种原因，我得到的返回值 1 不在我的数组值中，并且永远不会输出正确的单价。

我制作了一个 fiddle ，可能有助于调试，但这是一个相当基本的循环。

https://jsfiddle.net/joshmoto/up7avc1f/

这是我的脚本，我已经评论了我正在做的事情..

// the form
var $oForm = $('#custom_price_calculator');

// the price break array
var oPriceBreak = {
  100: 1.19,
  250: 1.17,
  500: 1.15,
  1000: 1.13,
  5000: 1.11,
  10000: 1.00,
};

// watch the quantity input for value changes
$('#inputCalculatorQty', $oForm).on('keyup', function () {

  // get our current value
  var iCurrentVal = $(this).val();

  console.log(iCurrentVal);

  // loop through my price break array
  $.each( oPriceBreak, function( qty, unit ) {

    // check if the current value is equal to or less than the qty key
    if( iCurrentVal <= qty ) {

        // if above returns true then set value as the unit price
        $('#inputCalculatorUnitPrice',$oForm).val(unit);

    }  

  });

});

我也将其添加为此处的片段..

// the form
var $oForm = $('#custom_price_calculator');

// the price break array
var oPriceBreak = {
  100: 1.19,
  250: 1.17,
  500: 1.15,
  1000: 1.13,
  5000: 1.11,
  10000: 1.00,
};

// watch the quantity input for value changes
$('#inputCalculatorQty', $oForm).on('keyup', function() {

  // get our current value
  var iCurrentVal = $(this).val();
  
  // loop through my price break array
  $.each(oPriceBreak, function(qty, unit) {

    // check if the current value is equal to or less than the qty key
    if (iCurrentVal <= qty) {

      // if above returns true then set value as the unit price
      $('#inputCalculatorUnitPrice', $oForm).val(unit);
      
    }

  });

});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<div class="container-fluid mt-5">
  <form id="custom_price_calculator">
    <div class="form-row">
      <div class="col-md-3 col-4 mb-3">
        <label for="inputCalculatorQty" class="font-weight-bolder">Quantity</label>
        <input type="number" class="form-control" id="inputCalculatorQty" value="1" min="1" required>
      </div>
      <div class="col-md-3 col-4 mb-3">
        <label for="inputCalculatorUnitPrice" class="font-weight-bolder">Unit Price</label>
        <input type="number" class="form-control" id="inputCalculatorUnitPrice" min="0.01" value="1.19" required disabled>
      </div>
      <div class="col-md-3 col-4 mb-3">
        <label for="inputCalculatorQty" class="font-weight-bolder">Origination</label>
        <input type="number" class="form-control" id="inputCalculatorQty" value="100" min="1" required>
      </div>
      <div class="col-md-3 mt-md-4 mb-3">
        <button class="btn btn-primary btn-sweets btn-block" type="submit"><i class="fas fa-calculator"></i> Calculate price</button>
      </div>
    </div>
  </form>
</div>

Answer 1

当找到您的条件时，您需要跳出每个循环。我在每个循环中添加了 return false。

// the form
var $oForm = $('#custom_price_calculator');

// the price break array
var oPriceBreak = {
  100: 1.19,
  250: 1.17,
  500: 1.15,
  1000: 1.13,
  5000: 1.11,
  10000: 1.00,
};

// watch the quantity input for value changes
$('#inputCalculatorQty', $oForm).on('keyup', function() {

  // get our current value
  var iCurrentVal = $(this).val();
  
  // loop through my price break array
  $.each(oPriceBreak, function(qty, unit) {
    // check if the current value is equal to or less than the qty key
    if (parseInt(iCurrentVal) <= parseInt(qty)) {


      // if above returns true then set value as the unit price
      $('#inputCalculatorUnitPrice', $oForm).val(unit);
      return false;
    }

  });

});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<div class="container-fluid mt-5">
  <form id="custom_price_calculator">
    <div class="form-row">
      <div class="col-md-3 col-4 mb-3">
        <label for="inputCalculatorQty" class="font-weight-bolder">Quantity</label>
        <input type="number" class="form-control" id="inputCalculatorQty" value="1" min="1" required>
      </div>
      <div class="col-md-3 col-4 mb-3">
        <label for="inputCalculatorUnitPrice" class="font-weight-bolder">Unit Price</label>
        <input type="number" class="form-control" id="inputCalculatorUnitPrice" min="0.01" value="1.19" required disabled>
      </div>
      <div class="col-md-3 col-4 mb-3">
        <label for="inputCalculatorQty" class="font-weight-bolder">Origination</label>
        <input type="number" class="form-control" id="inputCalculatorQty" value="100" min="1" required>
      </div>
      <div class="col-md-3 mt-md-4 mb-3">
        <button class="btn btn-primary btn-sweets btn-block" type="submit"><i class="fas fa-calculator"></i> Calculate price</button>
      </div>
    </div>
  </form>
</div>