Question

我找到的解决方案是jQuery，但还不能理解它们。

无论如何，我有几个滑块，我想让它们的组合最大值总是小于预定值（在这种情况下称为可用的变量）。因此，当我更改滑块时，其他滑块的最大值会发生变化。

＆＃13;

        var available = 10; 
        var max = 0;
        var old = 0;
        window.onload = function () {
            var sliders = document.getElementsByTagName("input");
            var numSliders = sliders.length;
            
            for (i = 0; i < numSliders; i++) {
               
                
                //Define all sliders?
                sliders.item(i).max = available;
                document.getElementById(sliders.item(i).id + "val").innerHTML = sliders.item(i).value;
                document.getElementById(sliders.item(i).id + "max").innerHTML = sliders.item(i).max;
                
                sliders.item(i).addEventListener("input", function(){
                    updateSliders(); 
                    Slider(this); 
                })
                

            }
        }
        function updateSliders() {
            var sliders = document.getElementsByTagName("input");
            var numSliders = sliders.length;
            for (i = 0; i < numSliders; i++)
                {
                    document.getElementById(sliders.item(i).id + "val").innerHTML = sliders.item(i).value;
                    document.getElementById(sliders.item(i).id + "max").innerHTML = sliders.item(i).max;
                    
                    
                   
                }
            
        };

        function Slider(active) {
            //Get weird set thingy of all sliders
            var sliderObject = document.getElementsByTagName("input");
            var numberSliders = sliderObject.length; 
            var total = 0; 
            //Work out what is being displayed
            for(i=0;i<numberSliders;i++)
                {
                    var value = sliderObject.item(i).value;
                    total += parseInt(value); 
                    
                }
            for(i=0;i<numberSliders;i++)
                {
                    var value = sliderObject.item(i).value;
                    max = available - value;
                    if(sliderObject.item(i) != active)
                        {
                            console.log("total = " + total);
                            console.log("old = " + old);
                            var difference = total - old; 
                            console.log("Difference = " + difference);
                            sliderObject.item(i).max = sliderObject.item(i).max - (total - old);
                            
                            
                            
                        }
                    
                    
                }
            old = total;
           
        }

＆＃13;

<div class="sliderContainer">
        <input id="slider1" type="range" value=0> <span id="slider1val">0</span>/<span id="slider1max">0</span>
        <br>
        <input id="slider2" type="range" value=0> <span id="slider2val">0</span>/<span id="slider2max">0</span>
        <br>
        <input id="slider3" type="range" value=0> <span id="slider3val">0</span>/<span id="slider3max">0</span>
        <br> </div>

＆＃13;

它有点有用，但它显示的数字是错的还是什么？

感谢您的时间。

Answer 1

您需要更改的一件事是在input事件上执行的函数调用的顺序。 Slider(this)应该是第一个。

以下是您的固定代码：https://codepen.io/kejt/pen/xgoqeX

Javascript组合值滑块

1 个答案: