Question

昨天我尝试制作一个滑块，在滑动时会增加和减少数量。这一切都适用于一种成分。

jsFiddle.1

代码：

 var defaultNumber = +($('.amount').text()); // Get default value of recipe for 8 persons
$('#slider').slider({   
  min: 1,
  max: 12,
  value: 8,
  step: 1,
  slide: function(event, ui) {
        $('.portionsChange').text(ui.value); // PORTIONS  

            $('.ingredient p').each(function(index, elem) { // Recalculate each ingredient amount
              console.log( index + ": " + $( this ).text() );

                var amount = $('.amount', elem);
            var number = +($('.amount').text()); // Get current value of the recipe
            var singleAmount = $('.amount').attr('data-single', parseFloat(defaultNumber*0.125)); // Add "data-single" to every recipe according to the defaultNumber of 8 persons
                var serve = ui.value * parseFloat(amount.data('single')); // Value of portions * original recipe

                amount.text(Math.round(serve * 100) / 100); // Round to 2 decimals
            });
    }
    });

然而，当我尝试添加更多成分时，他们将只是总结并成为相同的量。

我该如何解决这个问题？

jsFiddle.2

Answer 1

在许多失败和错误之后，我决定和我的一个朋友谈谈。我们（主要是他）编写了我想要实现的纯JavaScript版本。我想在这里张贴给其他想要做同样事情的人;

http://codepen.io/MaxHill/pen/CJAEl?editors=001

使用jQuery UI滑块更改金额

1 个答案: