2016-07-22 134 views
0

我正在嘗試在我的網站上實現simpleWeather.js

不幸的是,當我把html的在我的網站,我得到

Uncaught TypeError: $.simpleWeather is not a function

我在我的HTML頂部引用simpleWeather.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script> 

它被加載在網站上:

enter image description here

它完美對codepen.io雖然:/任何想法?

編輯:

我完整的代碼看起來是這樣的:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script> 
<script type="text/javascript"> 
    //copied javascript from codepen.io 
</script> 
<style type="text/css"> 
    //copied css from codepen.io 
</style> 
//copied html from codepen.io 
+0

哪裏是關於您的jQuery腳本標記您的simpleweather腳本標籤? (他們必須是這樣的順序:jQuery第一,然後是簡單的天氣。) –

+0

我認爲你正在試圖在插件加載之前調用'simpleWeather' ... –

+0

'jquery.min.js'引用就在'jquery之上。 simpleWeather.min.js'。我做了一切,如在codepen.io示例中:/ –

回答

0

看起來像你對我可能有腳本錯誤的順序。您的用於jQuery的script標記必須是之前的您的script標記for simpleWeather。然後你的腳本使用 simpleWeather必須在此之後。 (如果您使用的腳本加載器,你需要確保加載順序。)

0

請檢查代碼的順序...

你必須包括圖書館第一,那麼你可以訪問$ .simpleWeather( ) 方法。代碼順序是這樣的。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script> 
... 
... 
... 
<script> 
$.simpleWeather({ 
    zipcode: '76309', 
    unit: 'f', 
    success: function(weather) { 
     html = '<h2>'+weather.city+', '+weather.region+'</h2>'; 
     html += '<img style="float:left;" width="125px" src="images/weather/'+weather.code+'.png">'; 
     html += '<p>'+weather.temp+'&deg; '+weather.units.temp+'<br /><span>'+weather.currently+'</span></p>'; 
     html += '<a href="'+weather.link+'">View Forecast &raquo;</a>'; 

     $("#weather").html(html); 
    }, 
    error: function(error) { 
     $("#weather").html("<p>"+error+"</p>"); 
    } 
}); 
</script> 
0

試試這樣說:

jQuery(document).ready(function ($) { 
    // your code 
}); 

而且,寫script標籤後htmlcss

相關問題