jQuery .on（'click'）API調用問題

我一直在做一個簡單的天氣應用程序項目。用戶在一個輸入元素中輸入一個郵政編碼（當點擊一個按鈕元素時）將對wunderground.com進行API調用。然後從JSON對象中抓取幾條數據，並將其串入並插入到DOM中。jQuery .on（'click'）API調用問題

(function() { 
     var wundergroundAPI = "https://api.wunderground.com/api/3b411ca908826af8/conditions/q/"; 
     var input = $('input'); 

     $('#submit').on('click', function() { 
      var inputValue = input.val(); 
      var weatherByZip = wundergroundAPI += inputValue += '.json'; 
      $.getJSON(weatherByZip, function(json) { 
       $('#temp-f') 
       .text('Temperature: ' + JSON.stringify(json['current_observation']['temp_f']) + ' F'); 
       $('#location') 
       .text('Location: '+ JSON.stringify(json['current_observation']['display_location']['full'])); 
       $('#weather') 
       .text('Weather: ' + JSON.stringify(json['current_observation']['weather'])); 
       input.val(""); 
      }) 
     }); 
    })();

jQuery在第一個API調用中工作正常。

GET https://api.wunderground.com/api/3b411ca908826af8/conditions/q/70118.json

但是，第二個API調用沒有。

GET https://api.wunderground.com/api/3b411ca908826af8/conditions/q/70118.json06840.json

這個問題似乎是在我宣佈weatherByZip變量的方式：

var weatherByZip = wundergroundAPI += inputValue += '.json';

是我的本意是，weatherByZip變量將被更新（用新inputValue將加上以.json擴展名）每次調用該函數。相反，inputValue和.json會附加到先前創建的變量的末尾。

70118.json06840.json 
70118.json06840.json90210.json

我該如何解決我的jQuery功能，以糾正這個問題。也就是說，每次調用函數（單擊一個按鈕元素）時，都會發生新的/更新的API調用？

來源

2016-08-01 GoMagikarp

變化+ =至+

var weatherByZip = wundergroundAPI + inputValue + '.json';

wundergroundAPI + =裝置inputValue的：取wundergroundAPI的現有值和串聯的inputValue的背後的值。這就是你的wundergroundAPI不斷變長的原因。

來源

2016-08-01 19:19:33

謝謝Alain Stoffels！它工作完美。有時候我會陷入一個問題中，忽略簡單的解決方案。我一直在考慮使用什麼jQuery方法，而不是改變我的操作符。 – GoMagikarp

var inputValue = input.val(); 
var weatherByZip = wundergroundAPI + inputValue + '.json';

更安全的是修剪inputValue，以刪除空格，如果用戶添加它們。

var inputValue = input.val().trim();

但是，它知道，它不支持在IE8中。你需要一個polyfill。

編輯：作爲@Kevin B中提及，jQuery的提供所有平臺上工作的修剪方法。如果您需要支持IE8-或者不想複製/粘貼polyfill，請使用它，如下所示：

var inputValue = $.trim(input.val());

來源

2016-08-01 19:19:49 jonathanGB

*知道，但是，它不支持在IE8。*幸運的是，jquery也有一個方法。 –

不知道，謝謝。你知道這個方法是否適用於IE 8？ – jonathanGB

是的，因爲這就是他們添加它的原因。 http://api.jquery.com/jQuery.trim/ –

jQuery .on（'click'）API調用問題

回答

相關問題