javascript - 增加小数但位置正确

Question

我正在尝试制作一个投票系统，到目前为止我所做的是:

$('#Up').click(function() {
  var rate = $('#Rate').text();
  var math = parseInt(rate) + 1;

  $('#Rate').text(math.toFixed(1));

});

$('#Down').click(function() {
  var rate = $('#Rate').text();
  var math = parseInt(rate) - 1;

  $('#Rate').text(math.toFixed(1));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Up">Up Vote</button>
<div id="Rate">0</div>
<button id="Down">Down Vote</button>

我想何时按下向上或向下投票按钮，数字以小数格式增加或减少，但更改小数点的右侧位置。例如:

增量如下:(按赞成票排序)

0.1 => 0.2 = > 0.3 => 0.4 => 0.5 => 0.6 => 0.7 => 0.8 => 0.9 => 1.0 => 1.1 => 1.2

我尝试更改小数点左侧的位置，但我想更改右侧。

Answer 1

不要按整数调整值并使用 parseInt()，而是按小数调整值并使用 parseFloat()。

此外，这里不需要两个函数，因为它们仅在用于调整的数量上有所不同。只需使用一个函数并将所需的增量/减量传递给它即可。每当您发现自己正在编写已经编写过的代码时，请停下来思考如何重构代码以避免这种情况。重复的代码会导致代码库膨胀，无法很好地扩展，并且更难以调试。

最后，最佳实践是将变量设置为 DOM 对象(或者，在 JQuery 的情况下，为 DOM 对象集)，而不是对象的特定属性(如 .text()) 因为如果您稍后需要同一对象的不同属性，则必须重新查询 DOM 以获取对象引用。而且，通常的约定是，当您引用 JQuery 对象时，请在其前面加上 $ 前缀，以提醒您和其他人它不是 DOM 对象引用，而是 JQuery 引用。

var $rate = $('#Rate');

var result = null; // This is the variable that will store the most recent value

$('#Up').on("click", function(){ adjust(.1) });
$('#Down').on("click", function(){ adjust(-.1) });

function adjust(val){
  result = (parseFloat($rate.text()) + val).toFixed(1);
  $rate.text(result);
  console.log(result);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Up">Up Vote</button>
<div id="Rate">0</div>
<button id="Down">Down Vote</button>