javascript - HTML 中两个或多个范围输入共享一个(相同)最大值

Question

为了让您了解我正在尝试做的事情，知道浏览器策略实时游戏页面何时可以使用范围输入(或 ui slider )招募单位？像这样的东西... 我正在尝试创建一些应共享相同最大值的范围输入(由 ajax 调用动态给出)。例如，如果我的值为 10，当我将第一个范围更改为值 3 时，其余范围现在将具有最大值 7。如果我将值更改为第二个范围 2，则休息现在最多为 5...我暂时应该简化为只有 3 个范围(但会更多，比如 14 个)。

<input type="range" id="wpike" min="0" max="" value="0"><button>V</button>  
<input type="range" id="waxe" min="0" max="" value="0"><button>V</button>  
<input type="range" id="wsword" min="0" max="" value="0"><button>V</button>  

变量 $rangemax 将在 ajax 调用中给出，并放入每个范围输入最大值...我尝试使用 range 类创建 onchange 事件，但这将在实际更改范围内触发它(最小化其最大值是不可挽回的) )。

$('.ceva').on('change input', function () {
    var $rangemax = // $rangemax - wpike val - waxe val - wsword val(orientative)
        $('ceva').attr('max', $rangemax);
});

我可以分别为每个 id 执行 onchange 函数，例如:当我更改其值时，更改每个 id 的 atrr max(不包括更改的 id)...但这将导致巨大的代码，考虑到我应该有 14 个范围。 ..或者我可以有一个不可见的输入...当页面加载时，我用 $rangemax 填充它的值。范围将有 max 然后 $(ceva).on(change - 插入输入值 ($rangemax-waxe.val()-wpike.val()-so on... 然后将 $(ceva) 的 max attr 设置为插入元素值？会更优雅...但是..还不够？:D

Answer 1

经过马拉松的努力，我得到了你想要的；

更改第一个滚动条(“wpike”)；在此基础上，另外两个将被设置为waxe+wsword = 10 -wpike;

注意:这只适用于 3；扩展到 14 是需要更多考虑的事情；

window.onload = changeEvent()

function changeEvent() {
  let allInputs = document.querySelectorAll('input[type="range"]');
  let allIds = [];
  for(i=0;i<allInputs.length;i++) {
  	allIds.push(allInputs[i].getAttribute('id'));
     allInputs[i].onchange = function(e) {
       let idOfScrolledSlider = (e.path[0].getAttribute('id'));       
       changeSliders(allIds,idOfScrolledSlider)
     }     
  }
}

function changeSliders(allIds,idOfScrolledSlider) {
	let cleanedIdArray = popId(allIds,idOfScrolledSlider)
  let firstScrollValue = document.getElementById(idOfScrolledSlider).value;	
  document.getElementById('waxe').value = Math.floor(Math.random() * (10 -firstScrollValue));
  let secondScrollValue = Math.floor(Math.random() * (firstScrollValue))
  document.getElementById('wsword').value =10 - (parseInt(firstScrollValue) + parseInt(secondScrollValue));  
  console.log('firstScrollValue',firstScrollValue);
  console.log('secondScrollValue',secondScrollValue);
  console.log('3rd scoll', 10 - (parseInt(firstScrollValue) + parseInt(secondScrollValue)));
}

function popId(allIds,idOfScrolledSlider) {
  let newArray = [];
  allIds.map((id) => {
     if(id != idOfScrolledSlider) newArray.push(id);
  });   
   return newArray;
}

<input type="range" id="wpike" min="0" max="10" value="10"><button>V</button>  
<input type="range" id="waxe" min="0" max="" value="0"><button>V</button>  
<input type="range" id="wsword" min="0" max="" value="0"><button>V</button>