В настоящее время у меня есть следующий код для обновления 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;
  });
}); 
1
csling 30 Авг 2017 в 17:38

3 ответа

Лучший ответ

Почему бы не инкапсулировать ваш код в функцию?

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);
1
Queder 30 Авг 2017 в 14:48
$('#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;
  });

Вы пробовали что-то подобное?

4
Matej Žvan 30 Авг 2017 в 14:46

Как насчет этого подхода?

$(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;
                });
            }
        )
    }
    )
1
Argee 30 Авг 2017 в 14:51