javascript - 如果条件正确，为什么序列不起作用？

Question

我尝试在输入范围内通过每 5 个值添加 10 个单位的总和，一切正常，但由于某种原因，在 5 on 6 值添加 10 个之后，然后一切正常通常。

现在如何运作:0(0)、1(0)、2(0)、3(0)、4(0)、5(10)、6(20)、7(20) ... 10(20)等

它应该如何工作:0(0)、1(0)、2(0)、3(0)、4(0)、5(10)、6(10)、7(10) ... 10(20)等

$(document).ready(function() {
  $(".in_objem").on('input', function() {
    $(".range-indicator").text($(this).val());
  });
  $(".in_nagrev").on('input', function() {
    $(".nagrev-indicator").text($(this).val());
  });

  $(".in_objem,.in_nagrev").on('input', function() {
    var elem = 0;
    var price = 0;
    $(".in_objem,.in_nagrev").each(function(){
    	var b = $(this).val()/5;
    	var count = 0;
    	if(b >= 1)
    	{
    		for(var i = 0; i < b; i++)
    		{
    			elem += 10;
    			count += 10;
    		}
    		console.log(elem);
    	}
      $(this).attr("count_sum", count);
    });
    
    var v = 0;
    $('.premium-inpts:checked').each(function(){
      v = v + parseInt($(this).next('.flexy-block').attr("price"));
    });
    $("#price-board").text(v + elem);
    $("#output-price").val(v + elem);
  });

  $(".in_objem,.in_nagrev").trigger('input');

  $(".premium-inpts").on('click', function(){
    var sum = 0;
    var n1 = Number($('.in_objem').attr("count_sum"));
    var n2 = Number($('.in_nagrev').attr("count_sum"));
    sum = n1+n2;
    $('.premium-inpts:checked').each(function(){
      sum = sum + parseInt($(this).next('.flexy-block').attr("price"));
    });
    $("#price-board").text(sum);
    $("#output-price").val(sum);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
    <span class="nagrev-indicator">1</span><span>units1</span>
  </div>
  <div>
    <input class="in_nagrev" name="productivity1" type="range" min="1" max="30" value="1" count_sum="0">
  </div>
</div>
<div>
  <div>
    <span class="range-indicator">1</span><span>units2</span>
  </div>
    <div>
      <input class="in_objem" name="productivity2" type="range" min="1" max="30" value="1" count_sum="0">
    </div>
  </div>
<div>
  <input class="premium-inpts" id="a" type="radio" value="work">
    <label class="flexy-block" for="a" price="300">
      <span>Work</span>
    </label>

  <input class="premium-inpts" id="b" type="radio" value="chill">
    <label class="flexy-block" for="b" price="20">
      <span>Chill</span>
    </label>
</div>
<div class="motors-container">
  <input class="premium-inpts" id="c" type="radio" value="Automatic">
    <label class="flexy-block" for="c" price="90">
       <span>Automatic</span>
    </label>

  <input class="premium-inpts" id="d" type="radio" value="Common">
    <label class="flexy-block" for="d" price="0">
      <span>Common</span>
    </label>
</div>
<div class="price-board">Sum: <span id="price-board"></span></div>
<input id="output-price" name="Sum" type="hidden" value="">

Answer 1

你的代码之所以这样工作是因为你给 b 值 var b = $(this).val()/5; 然后你从 0 到 b .

如果你的值是 6，则 b = 6/5 实际上是 1.2 而不是 1。

因此，在您的 for 中，i 首先是 0，低于 1.2，然后是1 仍然低于 1.2。如果您想简单地解决您的问题，只需使用 b=Math.floor($(this).val()/5;) 即可“返回小于或等于给定数字的最大整数' mdn link .

但我不得不说您的代码很难阅读，因此您可能需要考虑提高可读性和效率。