gpt4 book ai didi

javascript - 如何将 html 脚本转换为 .js 文件脚本

转载 作者:行者123 更新时间:2023-12-03 09:09:28 24 4
gpt4 key购买 nike

想将脚本放入已打开的 .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>

最佳答案

如果您将现有的 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 */ });

关于javascript - 如何将 html 脚本转换为 .js 文件脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32124441/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com