Более эффективный jquery для оценки счета

Question

Я работаю над калькулятором, чтобы найти дополнительные расходы на основе стоимости счета.Основная идея заключается в том, что, если счет составляет менее 200 долларов, устанавливаются сборы для разных приращений.Если счет превышает 200 долларов, то плата увеличивается на 1,12 за каждые 50 долларов увеличения.В итоге я вручную выписал все возможности до 400 долларов, но я не уверен, насколько высоки могут быть счета, и, несмотря на это, я чувствую, что должен быть лучший способ сделать это, особенно ту часть, где ценностьобновляется в каждом утверждении IF.

<fieldset><label>Costs</label><input type="text" id="systemSize"/></fieldset>

<fieldset><label>Average bill amount <input type="text" id="billAmount"/></fieldset>

<p class="submit" id="submit">SUBMIT</p>

if(billAmount){
        if(billAmount<50){
            alert ("Bill amount is too low");
        }

        if(billAmount>=50 && billAmount <75){
            systemSizeNew = ("2.8");
            $("#systemSize").val(systemSizeNew);
        }

        if(billAmount>=75 && billAmount <100){
            systemSizeNew = ("3.36");
            $("#systemSize").val(systemSizeNew);
        }

        if(billAmount>=100 && billAmount <150){
            systemSizeNew = ("4.3");
            $("#systemSize").val(systemSizeNew);
        }

        if(billAmount>=150 && billAmount <200){
            systemSizeNew = ("5.32");
            $("#systemSize").val(systemSizeNew);
        }

        if(billAmount>=200 && billAmount <250){
            systemSizeNew = ("6.44");
            $("#systemSize").val(systemSizeNew);
        }

        if(billAmount>=250 && billAmount <300){
            systemSizeNew = ("7.56");
            $("#systemSize").val(systemSizeNew);
        }

        if(billAmount>=300 && billAmount <350){
            systemSizeNew = ("8.68");
            $("#systemSize").val(systemSizeNew);
        }

        if(billAmount>=350 && billAmount <400){
            systemSizeNew = ("9.80");
            $("#systemSize").val(systemSizeNew);
        }
       }

Answer 1

Сначала давайте переместим всю логику в отдельную функцию:

const chargePer50Increment = 1.12;
const chargeUpTo = {
    75: 2.8,
    100: 3.36,
    150: 4.3,
    200: 5.32
};    

function chargeForBill(amount) {
    if (amount < 50) {
        // or however else you want to handle it
        alert ("Bill amount is too low");

        return false;
    }

    for (var upTo in chargeUpTo) {
        if (amount < upTo) {
            return chargeUpTo[upTo];
        }
    }

    // at this point amount is >= 200 and upTo = 200

    const numOf50Increments = 1 + Math.floor((amount - upTo) / 50)); 

    return chargeUpTo[upTo] + numOf50Increments * chargePer50Increment;
}

Теперь все, что вам нужно сделать, это:

$("#systemSize").val(chargeForBill(billAmount));

Answer 2

В таких случаях я бы указывал словарь, который отражает пороговые значения в качестве ключей (обратите внимание, что здесь имеет значение порядок определения ключей - например, массивы, словари сохраняют порядок их ключей), и определяю функцию обратного вызова, так как у вас естьразличные действия в зависимости от суммы счета (в противном случае это может быть просто отображение значения для #systemSize)

function setSystemSize(systemSize) {
  return () => $("#systemSize").val(systemSize);
}

let callbacks = {
  50: () => alert("Bill amount is too low"),
  75: setSystemSize('2.80'),
  100: setSystemSize('3.36'),
  150: setSystemSize('4.30'),
  200: setSystemSize('5.32'),
  250: setSystemSize('6.44'),
  300: setSystemSize('7.56'),
  350: setSystemSize('8.68'),
  Infinity: setSystemSize('9.80'),
}

$('button.submit').on('click', function() {
  let value = parseInt($('#billAmount').val(), 10);
  if(isNaN(value)) return alert('enter bill amount');
  callbacks[Object.keys(callbacks).find(k => value < Number(k))]();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<fieldset>
  <label>Costs <input type="text" id="systemSize" readonly></label>
  <br>
  <label>Average bill amount <input type="text" id="billAmount"></label>
  <br>
  <button class="submit">Submit</button>
</fieldset>

Answer 3

Версия того, что @dubstylee упомянул в комментариях.

document.querySelector('#amount').addEventListener('input', function(event){
  var value = event.target.value;
  
  if (value < 50) {
    console.log(0);
  } else if (value < 75) {
    console.log(2.8);
  } else if (value < 100) {
    console.log(3.36);
  } else if (value < 150) {
    console.log(4.3);
  } else {
    /*
      take the value and subtract 200
      get the max between this value and 0, so the value will not be negative
      get the floor of this so values such as 0.98
          becomes 0 and 3.78 becomes 3
      multiply this by 1.12 before adding it to the base 5.32
    */
  
    console.log(
      5.32 + (
        Math.floor(Math.max(0, value - 200) / 50) * 1.12
      )
    );
  }
});

<input type="number" id="amount" value="49" min="0">