我有以下 html,包含 3 个 html5 input="range" 项目,我将其称为滑块。html 也有一个 span 标签来显示每个滑块的值。每个跨度标签显示一个百分比数量,所有 3 个总和为 100%。
HTML:
<div class="container">
<input type="range" class="slider" id="r1" value="70" /><span id="s1"></span><br />
<input type="range" class="slider" id="r2" value="20" /><span id="s2"></span><br />
<input type="range" class="slider" id="r3" value="10" /><span id="s3"></span><br />
<input type="hidden" class="placeholder" />
</div>
我编写了以下 jquery 代码,用于更新 2 个未更改的滑块,因为任何一个滑块都在更改。该代码使 span 标签的所有值保持同步,调整滑块未更改的两个标签,使三个标签的总和为 100。
jQuery:
<script type="text/javascript">
$().ready(function () {
//set the initial values for the spans
var sliders = $('.slider');
sliders.each(function (index, element) {
var slider = $(this);
slider.next('span').text(element.value);
})
$('.container').on('change', '.slider', function () {
var slider = $(this);
var sliderId = this.id;
var amount = this.value;
slider.next('span').text(amount);
//Iterate over the sliders that are not being changed, and update them
var sliders = $('.slider');
var sliderCount = sliders.length;
var otherSlidersCount = sliderCount - 1;
sliders.each(function (index, element) {
var x_id = this.id;
if (x_id != sliderId) {
var totalChangeAmount = 100 - amount;
var sliderChangeAmount = totalChangeAmount / otherSlidersCount;
this.value = sliderChangeAmount;
$(this).next('span').text(sliderChangeAmount);
}
})
});
});
</script>
这是一个带有工作代码的jsfiddle:
我遇到的问题是,我只是将更改滑块的更改百分比除以其他滑块的计数 (2),然后将该数量平均分配给其他 2 个滑块中的每一个。
我需要更改它,以便每个不变滑块的跨度值相对于其现有值进行更改。例如,如果我将滑块 1 从 70 增加到 80,那么滑块 2 应该减少 5 到 15,滑块 3 也应该减少 5 到 5(总共 100%)。
任何人都可以提供有关如何完成此任务的建议吗?