Question

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

我在setPrice函数中添加了一个条件。技术上和＃34;工作＆＃34;，但我需要将滑块滑动到大于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但是，当我试图将它放入滑动功能时，它打破了滑动能力。

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

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

2 个答案: