我有一个脚本和一些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>
假设您需要基本上观察事物并查看它们是否发生变化,它应该是简单的:
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);