我可以有两个外部.js脚本在一个html页面

Can I have two external .js scripts in one html page?

本文关键字：一个 页面 脚本 html 外部 两个 我可以 js      更新时间：2023-09-26

我有两个不同的函数，我想在同一个html页面上工作。两者都在改变两个不同的图像。我有一个外部文件的javascript。调用.js文件的脚本位于html的头部，尽管我也在正文中尝试过，但没有成功。

下面是html代码:

<img id="avoir" onclick="changeImage()" src="images/avoir.gif" width="700" height="394">
<img id="aller" onclick="changeImage()" src="images/aller.gif" width="700" height="394">

下面是.js文件的链接:

<script src="avoir.js"></script>
<script src="aller.js"></script>

下面是.js文件中的代码:对于第一个图像:

$(document).ready(function changeImage() {
  var image = document.getElementById('aller');
  if (image.src.match("allerchart")) {
    image.src = "images/aller.gif";
  } else {
    image.src = "images/allerchart.gif";
  } 
}

第二张图片:

$(document).ready(function changeImage() {
  if (image.src.match("avoirchart")) {
    image.src = "images/avoir.gif";
  } else {
    image.src = "images/avoirchart.gif";
  }
}

我是一个web开发的学生，不太熟悉javascript。目前发生的事情是，第二张图片在点击时发生变化，而第二张没有任何变化。谢谢你的建议。

可以加载多个外部JS脚本。但是，如果它们试图定义相同的全局函数，则最后一个函数将替换前一个函数定义的函数——具有给定名称的函数只能有一个。

定义函数的语法是错误的。你应该把函数定义放在顶层，而不是放在$(document.ready()里面。你写的东西叫做命名函数表达式。它定义了一个函数，但是名字的作用域只在函数体中，它不是全局可见的。

你应该给函数起不同的名字，比如changeAvoir和changeAller。或者您应该只在一个.js文件中定义一个函数，并让它接受一个参数:

function changeImage(image) {
    if (image.src.match("allerchart")) {
        image.src = "images/aller.gif";
    } else {
        image.src = "images/allerchart.gif";
    } 
}

那么你的HTML看起来像:

<img id="avoir" onclick="changeImage(this)" src="images/avoir.gif" width="700" height="394">
<img id="aller" onclick="changeImage(this)" src="images/aller.gif" width="700" height="394">

这被称为DRY原则:不要重复自己。当您看到遵循一个模式的多个代码时，您应该将该模式抽象到函数或循环中。然后，每种情况的不同特征可以来自模式或数据集合(数组或对象)。

两个代码块看起来完全相同。如果它们旨在针对不同的元素，则不应该使用相同的目标ID。id应该始终是唯一的。如果你想为两个独立的元素使用相同的标识符，你应该明确地定位它们，你可以在父容器上使用ID，否则你应该使用类或其他定位方法。

你可能还想用它来帮助你避免任何潜在的jQuery冲突。

jQuery ( document ).ready ( function ( $ ) {

无论您是将其转换为上面的内容还是继续使用已有的内容，您都应该在}

之后以结束最后一行

这应该可以让你开始

jQuery ( document ).ready ( function ( $ ) {
    var image = document.getElementById('aller');
    if (image.src.match("allerchart")) {
        image.src = "images/aller.gif";
    } else {
        image.src = "images/allerchart.gif";
    }
});

图片标签更改

<img id="avoir" src="images/avoir.gif" width="700" height="394">

<img id="aller" src="images/aller.gif" width="700" height="394">

第一个脚本文件

$(document).ready(function(){
    function changeImageAvoir() {
      var image = document.getElementById('aller');
      if (image.src.match("allerchart")) {
        image.src = "images/aller.gif";
      } else {
        image.src = "images/allerchart.gif";
   } 
   //This will call the function on the click event   
   $(document).on('click','#avoir', null, changeImageAvoir);
}();}

第二个脚本文件

$(document).ready(function(){
    function changeImageAller() {
      var image = document.getElementById('aller');
      if (image.src.match("allerchart")) {
        image.src = "images/aller.gif";
      } else {
         image.src = "images/allerchart.gif";
      }
   //This will call the function on the click event
   $(document).on('click','#aller', null, changeImageAller); 
}();}

函数调用基本上将代码保持在私有范围内。on函数将单击事件分配给图像标记。这是一种非侵入式编码，并使您的HTML更干净。

如果您真的想要圆滑，可以在函数调用中添加一个参数来接收图像句柄，这样您就不必使用getElementById了。

同样，如果你让函数调用泛型，你可以传入你正在寻找的匹配值，以及true和false条件，这样你就只有一个函数。那么你可能只需要一个文件。

相关文章：