Question

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

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

如何在功能changeRangeValue WHICH范围和changeInputValue WHICH输入中指定要更改的内容？预先谢谢你！

$('#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>

Answer 1

您将具有相同名称的功能重复两次。

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

像这样：

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>

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

1 个答案: