在JavaScript中如何监听多个字段的变化？

Question

我目前有以下代码来更新URL。如何将其组合成更健壮的东西，以便我不会基本上重复自己3次。我只想在更改字段时更新它。

$(document).ready(function(){
  $('#device_select').change(function() {
      var device = $(this).val();
      var face = $('#face_select').val();
      var position = $('#position_select').val();
      document.getElementById("add_dev_rack").href="127.0.0.1:8080/dcim/devices/"+device+"/edit/?face="+face+"&position="+position;
  });
  $('#face_select').change(function() {
      var device = $('#device_select').val();
      var face = $(this).val();
      var position = $('#position_select').val();
      document.getElementById("add_dev_rack").href="127.0.0.1:8080/dcim/devices/"+device+"/edit/?face="+face+"&position="+position;
  });
  $('#position_select').change(function() {
      var device = $('#device_select').val();
      var face = $('#face_select').val();
      var position = $(this).val();
      document.getElementById("add_dev_rack").href="127.0.0.1:8080/dcim/devices/"+device+"/edit/?face="+face+"&position="+position;
  });
}); 

- csling

Answer 1

$('#position_select, #device_select, #face_select').change(function() {
      var device = $('#device_select').val();
      var face = $('#face_select').val();
      var position = $('#position_select').val();
      document.getElementById("add_dev_rack").href="127.0.0.1:8080/dcim/devices/"+device+"/edit/?face="+face+"&position="+position;
  });

你尝试过类似这样的东西吗？

- Matej Žvan

Answer 2

为什么不将您的代码封装在一个函数中？

function updateURL() {
  var device = $('#device_select').val();
  var face = $('#face_select').val();
  var position = $('#position_select').val();
  document.getElementById("add_dev_rack").href="127.0.0.1:8080/dcim/devices/"+device+"/edit/?face="+face+"&position="+position;
}

您随时可以调用该函数：

$(document).ready(function(){
  $('#device_select').change(updateURL);
  $('#face_select').change(updateURL);
  $('#position_select').change(updateURL);
}); 

更好的是，您可以添加第二个函数，这样您的代码会更易读：

function listenForChanges(){
  $('#device_select').change(updateURL);
  $('#face_select').change(updateURL);
  $('#position_select').change(updateURL);
}

在 document.ready 上调用此函数：

$(document).ready(listenForChanges);

- Queder

---

完美适合我的场景。谢谢！ - csling

Answer 3

这种方法怎么样？

$(document).ready(function(){
        ['#position_select',  '#device_select',  '#face_select'].forEach(
            function(ev){
                $(ev).change(function() {
                    var device = $('#device_select').val();
                    var face = $('#face_select').val();
                    var position = $('#position_select').val();
                    document.getElementById("add_dev_rack").href="127.0.0.1:8080/dcim/devices/"+device+"/edit/?face="+face+"&position="+position;
                });
            }
        )
    }
    )

- Anatoly Strashkevich