Question

我有一个脚本和一些HTML，在我添加选项（选择）框之前它运行正常。我需要滑块显示滑块的值，并在合约的BTC价格下的字段中，但BTC价格还需要更新，具体取决于选择选项更改值依赖合约长度如果有人可以帮助我，那就太好了！

这是我的代码段：

＆＃13;

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();

＆＃13;

<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>

＆＃13;

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

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

1 个答案: