javascript - 在简短的内联事件中，是否可以从一个范围输入元素滑动两个范围输入元素？

Question

我想节省代码空间。我是否可以在“onchange”内联中输入一段简短的代码，以使两个范围元素通过仅移动其中一个来相互影响？

<form onchange="">
  <input type="range" value="0" id="rangeA" name="rangeA" min="-10" max="10">
</form>

<form onchange="">
  <input type="range" value="0" id="rangeB" name="rangeB" min="-10" max="10">
</form>

Answer 1

您只需将相同的事件处理程序附加到两个表单即可。事件处理程序将简单地检查哪个表单的范围已更改，并相应地更改另一个表单的范围。理论上，您可以拥有数百个带有范围的表单，其中一个将使用相同的事件处理程序更改其余表单:

//on dom ready
$(function() {
  //attach a change event listener to all forms
  $("form").on("change", function() {
    //for each of those forms do the following on change:

    //assign a $currForm to point at the current form
    $currForm = $(this);
    //get a list of all other forms and change their range
    //when the range of the current form changes
    $("form").filter(function() {
      //compares all forms with the current one and returns the others
      return $(this) != $currForm;
    }).children("input[type=range]").val($currForm.children("input[type=range]").val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="range" value="0" id="rangeA" name="rangeA" min="-10" max="10">
</form>

<form>
  <input type="range" value="0" id="rangeB" name="rangeB" min="-10" max="10">
</form>
<form>
  <input type="range" value="0" id="rangeC" name="rangeC" min="-10" max="10">
</form>
<form>
  <input type="range" value="0" id="rangeD" name="rangeD" min="-10" max="10">
</form>
<form>
  <input type="range" value="0" id="rangeE" name="rangeE" min="-10" max="10">
</form>