Question

我使用jQuery范围滑块来计算每月价格。我还有两个按钮可以在月度和年度价格之间切换。我有一切工作，除了一件大事：当我点击按钮更改定价模型时，我希望价格输出立即重新计算。如果我单击按钮然后移动滑块重新计算，但我需要它在按钮单击时立即重新计算。我尝试了很多很多东西，包括：将计算放在点击处理程序中（这使得它根本不起作用），我尝试了重新加载（）;＆＃39;方法，我尝试添加calculate（）;和更多。我确定它很容易丢失，但我无法找到合适的搜索字词来找到答案。我嘲笑了一个编写代码：http://codepen.io/redbranchmedia/pen/jEEqEw

这是我的JS：

var pricepermonth;
pricepermonth = 129;

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

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

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

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

Answer 1

http://jsfiddle.net/L897s0jL/

在点击功能上添加setPrice（）到.m2mbtn和.annualbtn

function setPrice(pricepermonth)
{
    var calcprice;
    var value=$s.slider( "value" );
      calcprice = (value * pricepermonth);

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

按钮单击时重新计算html输出

1 个答案: