Question

我正在使用我网站上来自OpenWeatherMap的API，仅在某些页面中仅显示某些特定位置的天气状况。这是代码：

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>


<body>
  <input type="hidden" name="name" value="dehradun" id="cityName">
  <button onclick="getWeather()">Get weather of Dehradun</button>

  <div class="weatherResponse"></div>
  <br><br>

  <input type="hidden" name="name" value="pune" id="cityName">
  <button onclick="getWeather()">Get weather of Pune</button> '
  <div class="weatherResponse"></div>
  <br><br>

  <script>
    function getWeather() {
      $('.weatherResponse').html('');
      var cityName = $('#cityName').val();
      var apiCall = 'http://api.openweathermap.org/data/2.5/weather?q=' + cityName + '&mode=json&units=metric&appid=d3d913fca612366a61837ea39a622480';
      $.getJSON(apiCall, weatherCallback);

      function weatherCallback(weatherData) {
        var cityName = weatherData.name;;
        var country = weatherData.sys.country;
        var description = weatherData.weather[0].description;
        var temp = weatherData.main.temp;

        $('.weatherResponse').append("The Weather in " + cityName + " " + country + " is currently " + description + " with temperature: " + temp);
      }
    }
  </script>
</body>

假设如果我想使用相同的Javascript函数显示两个地方的天气状况，那么它对两个地方都显示相同的结果（代码中首先提到的地方（Dehradun））。

帮我解决这个问题。

Answer 1

我在下面大致添加了工作代码，当您单击按钮时，它将在两个文本中显示该城市的报告，请尝试同时单击按钮并查看：

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>


<body>
<input type="hidden" name="name" value="dehradun" id="cityName2">
<button onclick="getWeather('dehradun')">Get weather of Dehradun</button>

<div class="weatherResponse"></div>
    <br><br>

<input type="hidden" name="name" value="pune" id="cityName1">
<button onclick="getWeather('pune')">Get weather of Pune</button>
    

 <br><br>
<div class="weatherResponse"></div>
<script>
 function getWeather(cityName){
$('.weatherResponse').html('');

var apiCall= 'http://api.openweathermap.org/data/2.5/weather?q=' + cityName + '&mode=json&units=metric&appid=d3d913fca612366a61837ea39a622480';
$.getJSON(apiCall,weatherCallback);

function weatherCallback(weatherData){
var cityName= weatherData.name;;
var country= weatherData.sys.country;
var description= weatherData.weather[0].description;
var temp= weatherData.main.temp;

$('.weatherResponse').append("The Weather in " + cityName + " " + country + " is currently " + description + " with temperature: " + temp);
}
}
</script>
</body>

Answer 2

您可以同时传递城市名称和div（显示结果）作为函数参数

 function getWeather(cityName, className)
 {
 
  $('.'+className+'').html('');

  var apiCall= 'http://api.openweathermap.org/data/2.5/weather?q=' + cityName + '&mode=json&units=metric&appid=d3d913fca612366a61837ea39a622480';
  $.getJSON(apiCall,weatherCallback);

  function weatherCallback(weatherData)
  {
    var cityName= weatherData.name;;
    var country= weatherData.sys.country;
    var description= weatherData.weather[0].description;
    var temp= weatherData.main.temp;

     $('.'+className+'').append("The Weather in " + cityName + " " + country + " is currently " + description + " with temperature: " + temp);
  }
}

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<body>
<button onclick="getWeather('dehradun','wr1')">Get weather of Dehradun</button>
<br><br>
<div class="wr1"></div>
<br><br>
<button onclick="getWeather('pune','wr2')">Get weather of Pune</button>
<br><br>
<div class="wr2"></div>
<br>
</body>

如何多次调用javascript函数？

2 个答案: