0

所以伙计们，我必须 JS 文件，并且在头脑中我有这个：

<script type="text/javascript" src="./scripts/changeImage.js"></script>
<script type="text/javascript" src="./scripts/changeImageBot.js"></script>

在体内我有这个：

<img id="myimage" onclick="changeImage()"src="./images/avatars/1.png"/>
<img id="botimage" onclick="changeImageBot()"src="./images/computer/1.png"/>

所以我的 JS 文件没问题，如果我有机器人changeimage，并且changeimagebot只有 1 个可以工作......但如果我只让一个页面上的文件可以完美运行

问题是如果我在页面加载时尝试同时使用它们..其中一个正在工作，另一个不起作用：| 如果我按下changeImage()功能，它会改变图像changeImageBot()......看看功能：

    var cb=0;
function changeImageBot(){
if(cb==-1){
  cb=0;
  document.getElementById('botimage').src="./images/computer/1.png";
  } else if (cb==0){
  cb=1;
  document.getElementById('botimage').src="./images/computer/2.png";
  } else if (cb==1){
  cb=2;
  document.getElementById('botimage').src="./images/computer/3.png";
  } blabla on.. 
}

var cc=0;
function changeImage(){
if(cc==-1){
  cc=0;
  document.getElementById('myimage').src="./images/avatars/1.png";
  } else if (cc==0){
  cc=1;
  document.getElementById('myimage').src="./images/avatars/2.png";
  } else if (cc==1){
  cc=2;
  document.getElementById('myimage').src="./images/avatars/3.png";
  } else if (cc==2){
  cc=3;
  document.getElementById('myimage').src="./images/avatars/4.png";
  } blalba so on
}

这些功能在2个不同的文件中..

4

1 回答 1

2

您只需要等待 DOM 完全加载。因为您似乎没有使用 jQuery，所以您需要使用经典的 JavaScript 方式。这是帮助您入门的文档。

附带说明：如果您使用 jQuery，这将变得非常容易。请询问您是否需要有关如何使用 jQuery 执行此操作的帮助。

更新：jQueryWay

  1. 首先在您的页面上包含jQuery 。
  2. 从您的 html 中删除 onClick 事件。
  3. 向您的两个 js 文件添加此代码并更改函数名称：
$(function() {
    $("#myimage").click(function() {
        changeImage();
    });
});

对你的两个 javascript 文件执行此操作，并相应地更改 imageID 和函数调用。

'#myimage'是您将点击回调绑定到的图像的 ID。这与您所做的完全相同，除了完全来自 javascript 代码。它还等待首先加载 dom。这是通过在$();函数中包装代码来完成的。

您还提到您有 140 张图像。不确定你的意思是什么，但如果你想在 100 张图像上应用来回调函数，你可以通过添加class = 'someclass'它们来做到这一点。然后您的 jquery 代码将看起来像$('.somclass').click(..) 所以您不必依赖 ID。

于 2013-08-19T14:59:38.823 回答