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

我正在使用JQuery范围滑块并将计算结果输出到html元素。到目前为止，我已经完成了所有工作，除了如果滑块的值大于10，我希望显示替代文本，而不是价格。您可以在此处看到代码笔：

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

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并使用hide/show，但是，当我尝试将其放入slide函数中时，它再次破坏了滑动功能

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");
  }
}

这个怎么样：

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语句中的值未定义。

而不是使用

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");
    }
});

---

谢谢，谢谢。我很感激！