Question

我有一些代码使用JS地理位置对象来查找用户的当前位置。当用户单击按钮时，它将使用其坐标填充表单字段。他们可以通过单击不同的按钮，然后填写不同的表单字段，在几个位置执行此操作。我希望这是有道理的...

目前我的代码还不是很完善，但是我不知道如何重构它。 JS是：

     **
#slideshow {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width:100%;
  height:100%;
  display: inline-block;
}
.elemnt,.elemnt1,.elemnt2,.elemnt3 {
    position: absolute;
    left: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    display: inline-block;
    text-align: center;
    }
    .elemnt {
      animation: xfade 50s 4s ; 
      background-image: url('flip_data/2w.png');
    }
    .elemnt1 {
      animation: xfade 50s 3s;  
      background-image: url('flip_data/2f2.png');
    }
    .elemnt2 {
      animation: xfade 50s 2s;
      background-image: url('flip_data/2f1.png');
    }
    .elemnt3 {
      animation: xfade 50s 0s;
    animation-fill-mode: forwards;
      background-image: url('flip_data/page_finale_web_flip.png');**

和我的HTML：

var firstLocation = document.getElementById("coordinates1");
var secondLocation = document.getElementById("coordinates2");
var thirdLocation = document.getElementById("coordinates3");

// Check if Geolocation is supported, if not, show message
function getLocation1() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition1);
    } else { 
        firstLocation.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function getLocation2() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition2);
    } else { 
        secondLocation.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function getLocation3() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition3);
    } else { 
        thirdLocation.innerHTML = "Geolocation is not supported by this browser.";
    }
}
// outputs the Latitude and Longitude
function showPosition1(position) {
    firstLocation.value = position.coords.latitude + 
    ", " + position.coords.longitude;
}

function showPosition2(position) {
    secondLocation.value = position.coords.latitude + 
    ", " + position.coords.longitude;
}

function showPosition3(position) {
    thirdLocation.value = position.coords.latitude + 
    ", " + position.coords.longitude;
}

以及<div class="col-xs-12 instructions-wrapper"> <p class="form-instructions">1. Add starting point coordinates </p> <div class="add-button" onclick="getLocation1()">+</div> </div>  <div class="col-xs-8 form-input"> <%= f.input :start_point, label: false, input_html: { id: 'coordinates1' } %> </div>和getLocation2的类似内容。

Answer 1

一种选择是对locations使用数组，然后在每次单击时查找适当的索引。您还应该使用Javascript而不是内联属性正确地附加处理程序，通常认为这是非常糟糕的做法，并且会导致代码难以管理。

假设每个.add-button有一个location，则可以使用以下命令向每个按钮添加一个侦听器：

const locations = ["coordinates1", "coordinates2", "coordinates3"]
  .map(id => document.getElementById(id));

// in newer browsers you can forEach directly over the NodeList, but for older browsers
// you'll either need to call `Array.prototype.forEach` or use a polyfill
Array.prototype.forEach.call(
  document.querySelectorAll('.add-button'),
  (button, i) => {
    button.addEventListener('click', () => getLocation(i));
  }
);

这将调用带有单击按钮的索引的getLocation（与您想要的location相同的索引）。然后，在getLocation中，只需在该索引处检索元素：

function getLocation(i) {
  const location = locations[i];
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(({ coords: { latitude, longitude }}) => {
      location.textContent = latitude + ", " + longitude;
    });
  } else { 
    location.textContent = "Geolocation is not supported by this browser.";
  }
}

请注意，div没有有意义的value，并且innerHTML仅应在插入HTML标记时使用-改为使用textContent。

如何重构此JS地理位置代码？

1 个答案: