如何将滑块和复选框链接到计数器？答案

【问题标题】：How to link a slider and checkbox to a counter?如何将滑块和复选框链接到计数器？
【发布时间】：2021-01-26 12:21:27
【问题描述】：

我是 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 欧元/p，251-500 3 欧元/p 和 501-1000 2 欧元/p。因此，我认为最简单的方法是创建一个数组并使用滑块的值将价格发送到柜台。

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/

【问题讨论】：

你什么时候解雇rangePrices.forEach？它是在函数内部还是在页面加载时？
高于 const 价格
是的，代码什么时候执行？我会说你的范围有问题。
哦，正在加载页面

标签： javascript jquery checkbox slider

【解决方案1】：

这就是我所做的：

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 函数中移出，因此它只声明一次，而不是每次移动滑块时声明。

【讨论】：