Question

希望将脚本放入已使用

打开的.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>

Answer 1

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

Answer 2

您需要以编程方式从.js文件中绑定事件处理程序。 jQuery会使这个非常简单并允许你使用任意的CSS选择器，但你可以在纯JS中使用例如document.getElementById和document.addEventListener。

Answer 3

您可以使用Javascript addEventListner

将函数绑定到事件

1-为每个段落标记添加id属性

   <p id="p1"> .....</p>

2-抓住指向每个

的变量

var p1 = document.getElementById('p1');

3-添加事件列表器

p1.addEventListener("mouseover", changeImage(monkeySrc));

Answer 4

如果您将javascript代码放在另一个文件中，并将<script>...</script>替换为HTML文件中的<script src="javascriptcodefilename.js"></script>，它仍可按预期工作。

示例：http://codepen.io/anon/pen/waLqxz

Answer 5

将所有网址添加到数组中可能更干净，其中键是链接的名称，因此您会有类似网址[＆＃39; lionSrc＆＃39;] =＆＃34; www。 xyz.com＆＃34 ;; ...

然后在你的changeImage函数中你会做document.getElementById（＆＃34; myImage＆＃34;）。src = url [src];

这样你甚至可以检查图像是否已经存在，如果没有，则显示未找到的图像＆＃34;图标。

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

5 个答案: