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

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

我为setPrice函数添加了一个条件。 技术上“工作”，但我需要将滑块滑动到大于10的值，然后单击其中一个按钮将其更改为文本。 我试图在slide函数中添加一个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并使用hide / show但是，当我试图将它放入滑动function时，它打破了滑动能力。

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

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

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