如果值大于某个数字，则更改滑块的输出答案

【问题标题】：Change output of slider if value is greater than a certain number如果值大于某个数字，则更改滑块的输出
【发布时间】：2014-11-19 16:32:42
【问题描述】：

我正在使用 JQuery 范围滑块并将计算输出到 html 元素。到目前为止，我已经完成了所有工作，除了如果滑块的值大于 10，我想显示替代文本而不是价格。你可以在这里看到一个codepen：http://codepen.io/redbranchmedia/pen/jEEqEw

我在 setPrice 函数中添加了一个条件。这在技术上“有效”，但我需要将滑块滑动到大于 10 的位置，然后单击其中一个按钮以将其更改为文本。我试图在幻灯片函数中添加一个 if/else 语句并将其存储在一个变量中，但这完全破坏了滑块。你可以在下面看到我的代码。只要滑块大于

var $s = $('.priceslider').slider({ 
    max: 15,
    min: 1,
    value: 2,
    slide: function(e,ui) {
      var calcprice;
      calcprice = (ui.value * pricepermonth);
      var output;
      if(value > 10) {
        output = ("too much");
      } else {
        output = ("$" + calcprice + "/mo");
      }
        $('.pricingtable').html(output);
    }
  });

我还尝试添加另一个 div 并使用隐藏/显示，但是，当我尝试将其放在幻灯片功能中时，它再次破坏了滑动功能。

var pricepermonth;
pricepermonth = 129;

$(".m2mbtn").on('click', function() {
  $(".m2mbtn").addClass('active');
  $(".annualbtn").removeClass('active');
  pricepermonth = 129;
  setPrice(pricepermonth)
  return false;
});

$(".annualbtn").on('click',  function() {
  $(".annualbtn").addClass('active');
  $(".m2mbtn").removeClass('active');
  pricepermonth = 99;
  setPrice(pricepermonth)
  return false;
});

var $s = $('.priceslider').slider({ 
    max: 15,
    min: 1,
    value: 2,
    slide: function(e,ui) {
      var calcprice;
      calcprice = (ui.value * pricepermonth);
      if (value > 10) {
 $('.pricingtable').hide();
    $(".enterprisepricing").show();
  } else {
    $('.pricingtable').html("$" + calcprice + "/mo");
  }

    }
  });

function setPrice(pricepermonth) {
  var calcprice;
  var value=$s.slider("value");
  calcprice = (value * pricepermonth);
  if (value > 10) {
 $('.pricingtable').hide();
    $(".enterprisepricing").show();
  } else {
    $('.pricingtable').html("$" + calcprice + "/mo");
  }
}

【问题讨论】：

标签： jquery jquery-ui jquery-ui-slider

【解决方案1】：

这个怎么样：

var $s = $('.priceslider').slider({ 
max: 15,
min: 1,
value: 2,
slide: function(e,ui) {
  var calcprice;
  calcprice = (ui.value * pricepermonth);
  var output;
  if(ui.value > 10) {
    output = ("too much");
  } else {
    output = ("$" + calcprice + "/mo");
  }
    $('.pricingtable').html(output);
}
});

if 语句中的值未定义。

【讨论】：

【解决方案2】：

而不是使用

if(value > 10)

你应该使用

if(ui.value > 10)

这将获得滑块的当前值。

如果您正在寻找一种方法来等待用户单击按钮以显示该值太大，那么您可以使用每次用户更改滑块时都会更新的全局变量.

var pricepermonth = 129;
var currentSliderPosition = 2; //Starting position of slider
...
$('.priceslider').slider({ 
    max: 11,
    min: 1,
    value: 2,
    slide: function(e,ui) {
      var calcprice;
      calcprice = (ui.value * pricepermonth);

      currentSliderPosition = ui.value;

      $('.pricingtable').html("$" + calcprice + "/mo");

    }
});

...

$('someButton').click(function(){
    if(currentSliderPosition > 10){
        $('.pricingtable').html("TOO MUCH");
    }
});

【讨论】：

谢谢，Adjit。我很感激！