Question

我有一个严重的问题，我想知道如何解决javascript或jquery中的问题，所以我有滑块输入类型=“范围”，它们都有100作为最大值，像这样：

 <input type="range" min="0" max="100" id="one">
    <input type="range" min="0" max="100" id="two">

因此，为了将它们都停在某个位置，我的意思是，当两个滑块都在值100时，例如：第一个位于30位置，第二个位于70位，滑块不能更多，或者每个人都在50岁。

在javascipt中进行操作，我取第一个滑块的值和第二个onet的值，并将它们放在一个变量co2中 var co2 = slider1 + slider2

然后我写了，

var co2 = slider1+slider2
                  
                  if(co2>=100){
                      
                       document.getElementById("one").disabled()=true;
                       document.getElementById("two").disabled()=true;
                      
                    }

它起作用它完全停止2个滑块，对我来说我只想不让它们超过100，而不是阻止它们

Answer 1

似乎这就是你想要的。

var elOne = document.getElementById("one"),
  elTwo = document.getElementById("two"),
  res = document.getElementById("result");

var result = 0;

elOne.addEventListener("input", function() {
  showResult("one");
}, false);

elTwo.addEventListener("input", function() {
  showResult("two");
}, false);

function showResult(slider) {
  result = parseInt(elOne.value) + parseInt(elTwo.value);
  if (result >= 100) {
    if (slider === "one")
      elOne.value = 100 - parseInt(elTwo.value);
    else
      elTwo.value = 100 - parseInt(elOne.value);

  }
  res.innerHTML = parseInt(elOne.value) + parseInt(elTwo.value);
}

#result {
    font-size: 2em;
}

<div style="margin-top: 1em">
  <h2>Total</h2>
  0 <input type="range" min="0" max="100" id="one">100 0
  <input type="range" min="0" max="100" id="two">100
</div>

<p id="result"></p>

停止2个滑块在某个位置

1 个答案: