如何將html腳本轉換為.js文件腳本
[英]how to convert an html script into a .js file script
問題描述
想要將腳本放入已經打開的.js文件中
$(document).ready(function() {
});
我已經嘗試過，但是感覺很像，因為我將onMouse over命令放到html中，我認為這不可能嗎？
<head>
<style>
div > p {
cursor: pointer;
}
</style>
<script>
var monkeySrc = "http://icons.iconarchive.com/icons/martin-berube/animal/256/monkey-icon.png";
var lionSrc = "http://icons.iconarchive.com/icons/martin-berube/animal/256/lion-icon.png";
var treeSrc = "http://totaltreeworks.co.nz/wp-content/uploads/2011/02/Tree-256x256.png";
var falconSrc = "http://icons.iconarchive.com/icons/jonathan-rey/star-wars-vehicles/256/Millenium-Falcon-01-icon.png";
function changeImage(src){
document.getElementById("myImage").src = src;
}
</script>
</head>
<body>
<div class="images">
<img id="myImage" width="256" height="256">
</div>
<div>
<p onmouseover="changeImage(monkeySrc)">Monkey are funny!</p>
</div>
<div>
<p onmouseover="changeImage(lionSrc)">Lions are cool!</p>
</div>
<div>
<p onmouseover="changeImage(treeSrc)">Trees are green!</p>
</div>
<div>
<p onmouseover="changeImage(falconSrc)">Falcons are fast!<p>
</div>
</body>
</html>
5 個解決方案
解決方案1
1 2015-08-20 17:30:17
如果要使用現有的JavaScript並將其放置在外部文件中，它將可以正常工作。 因為所有變量和函數都在全局范圍內，所以它將起作用。
再進一步，您將需要將那些onmouseover事件處理程序移至JavaScript本身。
對您當前的HTML進行少量更改，並假設使用jQuery，您可以執行以下操作：
<p data-kind="monkey">Monkey are funny!</p>
然后
var urlMap = {
monkey : 'http://icons.iconarchive.com/icons/martin-berube/animal/256/monkey-icon.png'
...
};
$('p').on('mouseover', function () {
var kind = $(this).data('kind');
var url = urlMap[kind];
changeImage(url);
});
然后，您可以將其包裝在$(document).ready ，其簡寫只是$(function () { /* The code from above here */ });
解決方案2
0 2015-08-20 17:27:50
您需要從.js文件中以編程方式綁定事件處理程序。 jQuery將使這一過程變得非常簡單，並允許您使用任意CSS選擇器，但是您可以在純JS中使用document.getElementById和document.addEventListener 。
解決方案3
0 2015-08-20 17:28:41
您可以使用JavaScript addEventListner將函數綁定到事件
1-為每個段落標簽添加id屬性
<p id="p1"> .....</p>
2-抓住一個指向每個變量的變量
var p1 = document.getElementById('p1');
3-添加事件列表
p1.addEventListener("mouseover", changeImage(monkeySrc));
解決方案4
0 2015-08-20 17:28:44
如果將javascript代碼放在另一個文件中，並用HTML文件中的<script src="javascriptcodefilename.js"></script>替換<script>...</script> ，它仍然可以正常工作。
解決方案5
0 2015-08-20 18:01:16
將所有URL添加到以鍵為鏈接名稱的數組中可能會更清潔，因此您將擁有urls ['lionSrc'] =“ www.xyz.com”;之類的東西。
然后在您的changeImage函數中，您將執行document.getElementById（“ myImage”）。src = url [src];
這樣，您甚至可以檢查圖像是否已經存在，如果不存在，則顯示“找不到圖像”圖標。
之間的區別 <script /> and <script></script> 用於在HTML中導入多個js文件
[英]Difference between <script /> and <script></script> for importing multiple js file in HTML
如何加載一個html文件<script> tag on a node js server?
[英]How to load an html file with <script> tag on a node js server?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何將此腳本轉換為js文件？
如何轉換 <script></Script> 到JS文件？
如何在HTML文件中包含.js腳本
之間的區別 <script /> and <script></script> 用於在HTML中導入多個js文件
如何在 react .js 文件中導入帶有腳本的 html 文件？
如何使用Node.js將CSV文件轉換為JSON腳本？
如何將js腳本嵌入到html中
如何在 HTML 文件中捆綁每個外部和內聯 JS 腳本
如何加載一個html文件<script> tag on a node js server?
如何在不使用 .html 或腳本標記的情況下輸出 .js 文件
相關標簽