Question

为了给你一个我想要做的图像，当你可以使用范围输入（或ui滑块）招募单位时，知道浏览器策略实时游戏页面吗？像这样...... 我试图做一些应该共享相同最大值的范围输入（由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调用中给出并放入每个范围输入最大值...我尝试使用范围类创建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填充它的值。范围将有最大然后$（ceva）.on（更改 - 在输入值中插入（$ rangemax-waxe.val（） - wpike.val（） - 等等...然后将$ attr的$（ceva）设置为插入元素值？会更优雅......但是......不应该？：D

Answer 1

马拉松比赛结束后，我有你想要的东西;

更改第一个滚动条（“wpike”）;基于其他两个将被设置为使得蜡+ 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>

Answer 2

我解决了它，很简单......只是数学...对不起我的无能，我会在这里说，也许有人会觉得它很有用。

<input type="range" class="ceva" id="a" min="0" max="10" value="0">  
<input type="range" class="ceva" id="b" min="0" max="10" value="0">
<input type="range" class="ceva" id="c" min="0" max="10" value="0"> 

 $(".ceva").on("change", function(){
 var maxi = 10;
 var a = $("#a").val();
 var b = $("#b").val();
 var c = $("#c").val();
 $('#a').attr("max" , (maxi - b - c));
 $('#b').attr("max" , (maxi - a - c));
 $('#c').attr("max" , (maxi - a - b));
 });

现在我必须在每个士兵有3个资源和不同成本的地方工作。

两个或多个范围输入在HTML中共享一个（相同）Max值

2 个答案: