Question

我在这里看到了很多像我这样的问题，但没有一个答案对我有用，我的JS成绩不及格。

我正在使用SimpleWeather.js，我要做的就是创建一个表单字段来更新邮政编码。我可以从表单获取zip变量，但无法获取它来更新getWeather（）函数，因此无法更新天气。

谢谢！

这是代码的重要部分。

HTML

<form>
  <input id="zip" type="text" name="zip">
</form>

JS

$(document).ready(function() {  
  getWeather(); 
  setInterval(getWeather, 600000);
});

var zip = "90001";
$('#zip').on("change", function(e) {
  e.preventDefault();
  var zip = $("#zip").val();  
  getWeather();
});

function getWeather() {
  $.simpleWeather({
    location: zip,
    woeid: '',
    unit: 'f',
    success: function(weather) {
...

我在https://codepen.io/anon/pen/wRgBBb有一个Codepen

Answer 1

您有几个小错误...您正在两次定义zip变量。您只需要定义一次，否则它将停留在90001。在您的CodePen中，您没有在抓取邮政编码后调用getWeather()。最后，您要将提交按钮设置为type="button"，以防止以经典HTML方式提交表单：

var zip = "90001";
$('#zip').on("change", function(e) {
  e.preventDefault();
  //var zip = $("#zip").val();  
  zip = $("#zip").val();
  getWeather();
});


<input type="button" id="setZip" name="setZip" value="Set Zip"/>

Answer 2

您应该将zip变量传递给函数，并将更新后的值也传递给函数。

const zip = "90001";

$(document).ready(function() {  
  getWeather(zip); 
  setInterval(getWeather, 600000);
});
$('#zip').on("change", function(e) {
  e.preventDefault();
  var new_zip = $("#zip").val();  
  getWeather(new_zip);
});

function getWeather(zip_code) {
  alert("Current zip: " + zip_code);
  //$.simpleWeather({
  //  location: zip_code,
  //  woeid: '',
  //  unit: 'f',
  //  success: function(weather) {
      // do your stuff  
  //  }
  //});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="zip">
<button>change</button>

希望将jquery变量从表单更新为函数

2 个答案: