Question

我有两个不同的功能，我想在同一个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";
  }
}

我是一名网络开发人员，对javascript不太熟悉。目前发生的是第二个图像在点击时发生变化，第二个图像没有发生任何变化。感谢您的任何建议。

Answer 1

您可以加载多个外部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 原则：不要重复自己。每当您看到多个代码遵循模式时，您应该将该模式抽象为函数或循环。然后，每个案例的不同特征可以来自模式或数据集合（数组或对象）。

Answer 2

两个代码块看起来都一样。如果它们旨在定位单独的元素，则不应使用相同的目标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";
    }
});

Answer 3

图片标记更改

<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函数将click事件分配给图像标记。这是非侵入式编码，可以让您的HTML更清晰。

如果你真的想要光滑，在函数调用中添加一个参数来接收图像句柄，那么你就不必使用getElementById。

此外，如果您将函数调用设为泛型，则可以传入您要查找的匹配值以及true和false条件，以便只有一个函数。那么你可能只需要一个文件。

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

3 个答案: