Question

我正在创建这个简单的范围滑块，并且在这里找到了我喜欢的滑块并为我工作。但是我试图让价格在.之后显示两位小数，并将.替换为,。

我已经读过(.toFixed(2))。但是我不知道如何以及在哪里放置它。既然我在这里找到了代码，希望这里有人可以帮助我。我试图将这个.toFixed(2)放在所有（可能是错误的）地方，但是没有运气。

我希望有人可以帮助我。我希望没什么要问的。预先感谢。

这是我正在使用的代码。

        $(document).ready(function($) {
          var itemtype = "item-1";
        
          $('.item-type').click(function() {
            $('.item-type').removeClass('item-type-active');
            $(this).addClass('item-type-active');
            itemtype = $(this).data('id');
            $('.calc-count').text($('.calc-range').val());
            rangeCalc($('.calc-range').val());
          });
        
          function rangeCalc(i) {
            var totalPrice = 0;
            var tariff = {
              "item-1": [{
                "begin": 1,
                "price": 29.50
              }, {
                "begin": 10,
                "price": 27.50
              }, {
                "begin": 15,
                "price": 24.50
              }, {
                "begin": 25,
                "price": 22.50
              }, {
                "begin": 40,
                "price": 20.50
              }, {
                "begin": 50,
                "price": 19.50
              }]
            };
        
            tariff[itemtype].forEach(function(num, item) {
              if (tariff[itemtype][item].begin <= i) {
                totalPrice = tariff[itemtype][item].price;
                $('.calc-total-price').text(i * totalPrice);
                $('.calc-price').text(totalPrice);
              };
              //console.log(tariff[item].begin);
            });
          };
        
          $('.calc-range').on('input', function() {
            $('.calc-count').text(this.value);
            rangeCalc(this.value);
          });
        
          //rangeCalc();
        
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="margin-top: 50px;">
        	<input class="calc-range m-top-20" type="range" min="1" max="300" step="1" value="1">
        </div>
        <div class="calc-count">1</div>
        	Total price: <span class="calc-total-price"></span>
        <br> Price per item: <span class="calc-price"></span>

Answer 1

当您使用数值作为数字进行环绕运算并尝试设置其toFixed值时，有时会比较棘手，因为它将val读取为字符串，并且您无法在字符串上使用int函数。在这种情况下，建议始终将数字预先设置为“数字格式”，然后开始。

<base href="/app"/>

我已经使用jsFiddle https://jsfiddle.net/dh45rqzy/1/

对其进行了测试

用而不是来更新小提琴。 https://jsfiddle.net/dh45rqzy/2/

我建议仅在确定只显示$(document).ready(function($) { var itemtype = "item-1"; $('.item-type').click(function() { $('.item-type').removeClass('item-type-active'); $(this).addClass('item-type-active'); itemtype = $(this).data('id'); $('.calc-count').text($('.calc-range').val()); rangeCalc($('.calc-range').val()); }); function rangeCalc(i) { var totalPrice = 0; var tariff = { "item-1": [{ "begin": 1, "price": 29.50 }, { "begin": 10, "price": 27.50 }, { "begin": 15, "price": 24.50 }, { "begin": 25, "price": 22.50 }, { "begin": 40, "price": 20.50 }, { "begin": 50, "price": 19.50 }] }; tariff[itemtype].forEach(function(num, item) { if (tariff[itemtype][item].begin <= i) { totalPrice = tariff[itemtype][item].price; var total_price_CTP = Number(i * totalPrice).toFixed(2); totalPrice = Number(totalPrice).toFixed(2); $('.calc-total-price').text(total_price_CTP); $('.calc-price').text(totalPrice); }; //console.log(tariff[item].begin); }); }; $('.calc-range').on('input', function() { $('.calc-count').text(this.value); rangeCalc(this.value); }); //rangeCalc(); });时才将.替换为,，因为如果您打算再次进行一些重新计算，那么建议您将其替换为$('.calc-total-price').text(total_price_CTP); $('.calc-price').text(totalPrice); //To -> $('.calc-total-price').text(total_price_CTP.replace('.',',')); $('.calc-price').text(totalPrice.replace('.',','));。，它不会解决。

这些是我做了一些调整的行。

{{1}}

带有2个小数的简单范围滑块

1 个答案: