如何解决如何将滑块和复选框链接到计数器?
我是 JavaScript 新手。我正在尝试将滑块和复选框链接到计数器。滑块应根据范围增加计数器的值。然后复选框有固定值取决于用户(滑块的值是用户,我将在后面解释)如果选中或不选中,他们应该添加到计数器中。
var slider = document.querySelector('#myRange'); //Input
var output = document.querySelector("#value-range"); //Output
let rangeValue = document.querySelector('#final-price'); //Counter
const boxesContainer = document.querySelector('.price-boxes__container'); //Checkboxes
我为复选框创建了一个事件,所以当你点击它时,添加值。
boxesContainer.onchange = function(e) {
if (e.target.classList.contains('checkbox')){
const price = parseInt(e.target.getAttribute('value'))
if (e.target.checked === true) {
total += price;
} else {
total -= price;
}
rangeValue.innerHTML = total
}
}
我还为滑块创建了另一个事件。
slider.oninput = function () {
let value = slider.value;
userPrice(value)
output.style.left = (value/2.88);
output.classList.add("show");
rangeValue.innerHTML = prices[value-25];
function userPrice (value) {
if (value == 25) {
output.innerHTML = '6 €p'
} else {
output.textContent = `${prices[value-25] - prices[value-26]} €p`;
}
}
}
滑块的最小值为 25,最大值为 1000,步长 = 1,值 = 25。每一步都是一个用户。我创建了一个数组,其价格取决于滑块的值。 26-50 名用户 6 欧元/人、51-250 4 欧元/人、251-500 3 欧元/人和 501-1000 2 欧元/人。因此,我认为最简单的方法是创建一个数组并使用滑块的值将价格发送到柜台。
const range = (start,stop,step) => Array.from({ length: (stop - start) / step + 1},(_,i) => start + (i * step));
let rangePrices = range(25,1000,1);
const prices = [];
rangePrices.forEach((rangeValue,i)=> {
if(rangeValue === 25) {
prices.push(299)
} else if (rangeValue < 51) {
prices.push(prices[i-1] + 6)
} else if (rangeValue < 251){
prices.push(prices[i-1] + 4)
} else if (rangeValue < 501) {
prices.push(prices[i-1] + 3)
} else {
prices.push(prices[i-1] + 2)
}
});
但最后,当我点击复选框时,计数器会添加复选框的值,但它会重置。我知道我有两个 rangeValue.innerHTML 并且因此它不起作用,但我不知道如何修复它...
正如我在开头所说,复选框取决于滑块值。 26-50 0.7€/p.u.,51-250 0.5€/p.u.,251-500 0.4€/p.u.和 501-1000 0.3€/p.u.. 因此,复选框与滑块相关。我也不知道如何链接这两个功能。最后说还有 2 个复选框。
如果有人能帮助我就好了!
https://jsfiddle.net/NilAngelats/wq7tjh8c/
解决方法
这就是我所做的:
let total = 0;
boxesContainer.onchange = function(e) {
...
rangeValue.innerHTML = prices[slider.value - 25] + total
}
slider.oninput = function() {
...
rangeValue.innerHTML = prices[value - 25] + total;
}
将 userPrice
函数移出 slider.oninput
函数,这样它只声明一次,而不是每次移动滑块时声明。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。