jquery - jQuery 滑块 | 数量取决于两个滑块的值

Question

我坚持以下几点：

根据尺寸和订单大小，我有不同价格的产品。例子。1x 小号 = $10,-- 2x 小号 = $17,50 3x 小号 = $20,--

我在一个滑块中有这个，其中句柄设置订单大小和金额显示订单的价格。但现在我想添加另一个滑块来选择其他产品尺寸（中、大）

第二个滑块的值将影响总价。

If slider1 = 1 (piece)
and if slider2 = Small
then Price =  $ 10,--

If slider1 = 1 (pieces)
and if slider2 = Medium
then Price = $ 12,50

等等等等

所以总订单价格取决于两个滑块的值。请有人帮我解决这个问题吗？

现在我有这个：

$(function() {
    var sizes1 = ["10", "17,50", "20"];
    $("#slider").slider({
        value: 0,
        min: 0,
        max: sizes1.length - 1,
        step: 1,
        slide: function(event, ui) {
            $("#amount").val(sizes1[ui.value]);
        }
    });
    $("#amount").val('10');
});​

Answer 1

移动滑块时，更改总值：

var sizes1 = ["10", "17,50", "20"];
var sizes2 = ["12,50", "...", "..."];
var sizes3 = ["...", "...", "..."];

function calculateprice() {
    var slider1 = $("#slider1").slider("value");
    var slider2 = $("#slider2").slider("value");

    if (slider2 == 1) $("#amount").val(sizes1[slider1]); //Small
    if (slider2 == 2) $("#amount").val(sizes2[slider1]); //Medium
    //etc
}

//create your 2 slides
$("#slider1").slider({
    value: 0,
    min: 0,
    max: sizes1.length - 1,
    step: 1,
    slide: function(event, ui) {
        calculateprice();
    }
});

//etc