Javascript滑块值取决于选择选项以填充价格字段

Question

我有一个脚本和一些HTML，在我将其添加到选项（选择）框中之前，它工作正常。 我需要滑块来显示滑块的值，并在合同的BTC价格下的字段中显示，但是BTC价格还需要根据选择选项进行更新，更改与价格相关的合约时长如果有人可以帮助我那很好啊！

这是我的代码段：

 var rangeSlider = function() { var slider = $('.range-slider'), range = $('.range-slider__range'), value = $('.range-slider__value'); var slider = $(".month_select: selected").value();; if (slider == 1) { month = 1 m; } else if (slider == 2) { month = 2 m; } else if (slider == 3) { month = 3 m; } else if (slider == 4) { month = 4 m; } else if (slider == 5) { month = 5 m; } else if (slider == 6) { month = 6 m; } else if (slider == 7) { month = 7 m; } else if (slider == 8) { month = 8 m; } else if (slider == 9) { month = 9 m; } else if (slider == 10) { month = 10 m; } else if (slider == 11) { month = 11 m; } else if (slider == 12) { month = 12 m; } var 1 m = "0.000003732"; var 2 m = "0.000004732"; var 3 m = "0.000005732"; var 4 m = "0.000006732"; var 5 m = "0.000007732"; var 6 m = "0.000008732"; var 7 m = "0.000009732"; var 8 m = "0.000010732"; var 9 m = "0.000011732"; var 10 m = "0.000012732"; var 11 m = "0.000013732"; var 12 m = "0.000014732"; slider.each(function() { value.each(function() { var value = $(this).prev().attr('value'); $(this).html(value); }); range.on('input', function() { $(this).next(value).html(this.value); document.getElementById("price").innerHTML = this.value * month; }); }); }; rangeSlider(); 

 <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <section> <span>SHA-256 (BTC)</span> <div class="chart"> <canvas id="c1" width="900" height="200"></canvas> </div> </section> <section> <div class="range-slider"> <input class="range-slider__range" type="range" value="100" min="10" max="10000"> <span class="range-slider__value"></span> <span>Ghs</span> <h4>Price: <span id="price"></span> BTC</h4> </div> <select class="month_select" class="classic"> <option>Select contract length</option> <option value="1">1 Month</option> <option value="2">2 Months</option> <option value="3">3 Months</option> <option value="4">4 Months</option> <option value="5">5 Months</option> <option value="6">6 Months</option> <option value="7">7 Months</option> <option value="8">8 Months</option> <option value="9">9 Months</option> <option value="10">10 Months</option> <option value="11">11 Months</option> <option value="12">12 Months</option> </select> 

Answer 1

假设您基本上需要观察事物并查看它们是否发生了变化，这应该像下面这样简单：

var monthSelect_Selector = '.month_select';
var sliderRange_Selector = '.slider__range_Selector';

var valuesChangedFn = function() {
  var monthSelect_value = $(monthSelect_Selector).val();
  var sliderRange_value = $(sliderRange_Selector).val();

  // Do your calculations here and set whatever HTML you want to set

  // As far as setting the values of your slider manually, you might try to reinitialize 
  // whatever library you're using with a new set of values, rather than directly manipulate HTML
};

$(monthSelect_Selector + ', ' + sliderRange_Selector).change(valuesChangedFn);