时间戳

首页 > 解决方案 > 指定哪个范围输入受哪个文本输入影响，反之亦然

javascript - 指定哪个范围输入受哪个文本输入影响，反之亦然

问题描述

我正在设置一个带有范围的页面，我希望它“链接”到一个数字输入框。这些都改变了 div 的字体大小。因此，随着范围滑块或数字输入的更改，另一个更改以匹配并且字体大小增加/减小。

当页面上只有一个实例时，这一切都有效。当我添加 2 时，它不知道应该匹配什么。目前，两个范围滑块都改变了第二个数字框，但都没有改变第一个数字框。

如何在函数 changeRangeValue 中指定要更改的范围和 changeInputValue 哪个输入？先感谢您！

$('#sliderA').on('input', function() {
  var v = $(this).val();
  $('#textA').css('font-size', v + 'px')
  $('#numericA').html(v);
});

function showValue1(newValue) {
  document.getElementById("numericA").innerHTML = newValue;
}

function changeRangeValue(val) {
  document.getElementById("sliderA").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
  showValue1(val);
}

function changeInputValue(val) {
  document.getElementById("numericA").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
  showValue1(val);
}

$('#sliderB').on('input', function() {
  var v = $(this).val();
  $('#textB').css('font-size', v + 'px')
  $('#numericB').html(v);
});

function showValue1(newValue) {
  document.getElementById("numericB").innerHTML = newValue;
}

function changeRangeValue(val) {
  document.getElementById("sliderB").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
  showValue1(val);
}

function changeInputValue(val) {
  document.getElementById("numericB").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
  showValue1(val);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> <span>Size:</span>
  <input type="number" id="numericA" value="16" min="10" max="40" onkeyup="changeRangeValue(this.value)" /><span> px</span>
  <input type="range" id="sliderA" value="16" min="10" max="40" oninput="changeInputValue(this.value)" /></div>
</div>
<div id="textA">To be changed by first range slider/number box. </div>
<div> <span>Size:</span>
  <input type="number" id="numericB" value="16" min="10" max="40" onkeyup="changeRangeValue(this.value)" /><span> px</span>
  <input type="range" id="sliderB" value="16" min="10" max="40" oninput="changeInputValue(this.value)" /></div>
</div>
<div id="textB">To be changed by second range slider/number box.</div>

标签： javascripthtml

解决方案

您的函数使用相同的名称重复了两次。

您也仅在滑块值更改时更新字体大小，我更改了代码以更新输入上的字体大小。

像这样：

function updateA(){
   var v = $('#sliderA').val();
   $('#textA').css('font-size', v + 'px')
}

function showValue1(newValue) {
  document.getElementById("numericA").innerHTML = newValue;
}

function changeRangeValueA(val) {
  document.getElementById("sliderA").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
  showValue1(val);
  updateA();
}

function changeInputValueA(val) {
  document.getElementById("numericA").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
  showValue1(val);
  updateA();
}

function updateB(){
   var v = $('#sliderB').val();
   $('#textB').css('font-size', v + 'px')
}

function showValue2(newValue) {
  document.getElementById("numericB").innerHTML = newValue;
}

function changeRangeValueB(val) {
  document.getElementById("sliderB").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
  showValue2(val);
  updateB();
}

function changeInputValueB(val) {
  document.getElementById("numericB").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
  showValue2(val);
  updateB();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> <span>Size:</span>
  <input type="number" id="numericA" value="16" min="10" max="40" onkeyup="changeRangeValueA(this.value)" /><span> px</span>
  <input type="range" id="sliderA" value="16" min="10" max="40" oninput="changeInputValueA(this.value)" /></div>
</div>
<div id="textA">To be changed by first range slider/number box. </div>
<div> <span>Size:</span>
  <input type="number" id="numericB" value="16" min="10" max="40" onkeyup="changeRangeValueB(this.value)" /><span> px</span>
  <input type="range" id="sliderB" value="16" min="10" max="40" oninput="changeInputValueB(this.value)" /></div>
</div>
<div id="textB">To be changed by second range slider/number box.</div>

推荐阅读