Question

我有一个jquery滑块，其最大值和最小值

$("#slider").slider({
    max: 1000,
    step: 5,
    min: 100,
    slide: function (event, ui) {
        console.log("Current slider value", ui.value);
        for (var i = 0; i < prices.length; i++) {
            // modify the price on slider change
            prices[i].price = prices[i].price + ui.value
        }
    }
})

还有一个存储价格的数组

 var prices = [
    { price: 200 },
    { price: 400 },
    { price: 600 },
    { price: 800 }
];

并修改滑块更改的price值，但如何根据滑块值更改正确增加和减少值。

目前我的解决方案仅在更改时添加当前滑块值。

修改

plunker https://plnkr.co/edit/rdo7VMbKmRW6jY85yadb?p=preview

var prices = [100, 200, 300, 400];

$(function() {
  $("#slider").slider({
    max: 1000,
    step: 5,
    min: 100,
    change: function(event, ui) {
      console.log(ui.value);
      for (var i = 0; i < prices.length; i++) {
        prices[i] = prices[i] + ui.value
      }

      $('#output').html(JSON.stringify(prices))
    }
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="slider"></div>
<div id="output"></div>

Answer 1

可能是对象滑块上的函数change。

 $("#slider").slider({
        max:1000
        step:5,
        min:100
        change:function (event,ui) {
            console.log("Current slider value",ui.value);
            for (var i=0;i<prices.length;i++){
               // modify the price on slider change
               prices[i].price = prices[i]+ui.value   
            }
        })

请参阅fiddle

Answer 2

只有两个数组

var prices = [100, 200, 300, 400], newPrice = [];

$(function() {
  $("#slider").slider({
    max: 1000,
    step: 5,
    min: 100,
    change: function(event, ui) {
      console.log(ui.value);
      for (var i = 0; i < prices.length; i++) {
        newPrice[i] = prices[i] + ui.value
      }

      $('#output').html(JSON.stringify(newPrice))
    }
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="slider"></div>
<div id="output"></div>

Answer 3

这里的问题是，无论是增加滑块值还是减小滑块值，都要增加数组值。

您应该测试ui.value是否已降低以减少数组值：

$(function() {
  var lastValue = 0;
  $("#slider").slider({
    max: 1000,
    step: 5,
    min: 100,
    change: function(event, ui) {
      for (var i = 0; i < prices.length; i++) {
        prices[i] = prices[i] + (ui.value > lastValue) ? ui.value : -ui.value;
      }
      lastValue = ui.value;
      $('#output').html(JSON.stringify(prices))
    }
  });
});

<强>演示：

var prices = [100, 200, 300, 400];

$(function() {
  var lastValue = 0;
  $("#slider").slider({
    max: 1000,
    step: 5,
    min: 100,
    change: function(event, ui) {
      for (var i = 0; i < prices.length; i++) {
        prices[i] = prices[i] + (ui.value > lastValue) ? ui.value : -ui.value;
      }
      lastValue = ui.value;
      $('#output').html(JSON.stringify(prices))
    }
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="slider"></div>
<div id="output"></div>

<强>解释

将初始值存储在lastValue变量上以及滑块值的每次更改上：

检查新值是否大于最后一个值，因此请增加数组值，否则减少它们。
更新最后一个值lastValue = ui.value;。

Jquery滑块：在滑块更改时更改数组上的值

3 个答案: