如果值大于一定数值，则更改滑块的输出 [英] Change output of slider if value is greater than a certain number

问题描述

我正在使用"jQuery范围"滑块并将计算结果输出到html元素.到目前为止，我可以进行所有工作，只是如果滑块的值大于10，我想显示替代文本而不是价格.您可以在此处看到一个Codepen: http://codepen.io/redbranchmedia/pen/jEEqEw

I am using the JQuery range slider and outputting a calculation to an html element. I have everything working thus far except that, if the value of the slider is greater than 10, I want to display alternate text rather than the price. You can see a codepen here: http://codepen.io/redbranchmedia/pen/jEEqEw

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

I added a conditional to the setPrice function. That technically "worked", but I need to slide the slider to something greater than 10, then click one of the buttons to get it to change to text. I tried to add an if/else statement inside the slide function and store it in a variable, but that broke the slider entirely. You can see my code below. As soon as the slider is greater than

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函数中时，它破坏了滑动能力.

I also tried adding another div and using hide/show but, again, when I tried to put it inside the slide function, it broke the sliding ability.

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

The value in the if statement is undefined.

这篇关于如果值大于一定数值，则更改滑块的输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！