jquery - jquery 两个滑块不同的价格

Question

我现在很困惑：

我有两个滑块：一个是数量，另一个是合同期。如果数量增加，每件的价格就会下降。如果合同期增加，每件价格将下降更多。

我现在有这个： http: //jsfiddle.net/vBVkL/16/ 不知何故，当我使用批量时，我无法更改每件的价格。

    qty = ui.value;  //-> this works

    qty = batches[ui.value - 1]; //-> this doesn't work

有人可以帮我解决这个问题吗？谢谢！

score 1 · Accepted Answer

在滑块处理程序中更改以下行：

$("input").val(prices[contract][qty - 1]);

至

$("input").val(prices[contract][ui.value - 1]);

原始代码使用的qty是字符串变量。当您尝试从中减去 1 时，它会导致“不是数字”，它不能用于索引batches数组。

prices你的数组也有问题。它们只包含三个值，但您的滑块可以选择第四个，您需要在这些数组的末尾添加一个值：

var prices = {
    'none': [10, 9, 8, ?],
    '12 months': [9, 8, 7, ?],
    '24 months': [8, 7, 6, ?],
    '36 months': [7, 6, 5, ?],
};

我不确定为什么页面第一次加载时滑块没有正确动画。

编辑：

页面加载时滑块不起作用的原因是用于初始化变量的值：

var contract = 'Geen'

当滑块移动时，代码尝试在数组$("input").val(prices[contract][qty - 1]);中查找值并失败，因此函数因错误而结束，并且 jQueryUI 永远不会完成更新滑块的工作。直到您移动第二个滑块，变量才被正确设置。Geencontracts

将初始值设置contract为“无”意味着代码将正确执行并且滑块将动画。

您还遇到了一个错误，即在设置价格时更改合同期限滑块会忽略数量滑块的值。该行：

$("input").val(prices[contract][ui.value - 1]);

在“slider2”事件处理程序应更改为：

$("input").val(prices[contract][$("#slider1").slider("value") - 1]);

看看更新后的小提琴，现在一切正常。

1 回答 1