Question

我需要计算已点击的图像，但是多次点击它们并在警报中显示。

我可以让它工作，但是，我在表格中旋转图像，这意味着它只计算图像所在的空间而不是图像本身。

我不确定如何计算图像而不仅仅是数组值/空间。

   <html>
   <head>
    <script>
   count = [0, 0, 0, 0]
   function myAlert(n)
       {

       count[n]++

           alert(document.images[n].src + " " + count[n])
       }

   function rotImage()
       {
       document.getElementById('pic1').src = 
   "C:/Users/Cain/Documents/School/College/Junior 2/Cancerscript/tablepic3.png"
       document.getElementById('pic2').src = 
   "C:/Users/Cain/Documents/School/College/Junior 2/Cancerscript/tablepic1.png"
       document.getElementById('pic3').src = 
   "C:/Users/Cain/Documents/School/College/Junior 2/Cancerscript/tablepic4.png"
       document.getElementById('pic4').src = 
   "C:/Users/Cain/Documents/School/College/Junior 2/Cancerscript/tablepic2.png"
       }


    </script>
   </head>

   <body>
    <table border="0" cellspacing="0" cellpadding="0">
     <tr>
      <td>
       <img src="C:\Users\Cain\Documents\School\College\Junior 
   2\Cancerscript\tablepic1.png"
       width="200" height="200" id="pic1" onclick = "myAlert(0)">
      </td>
      <td>
       <img src="C:\Users\Cain\Documents\School\College\Junior 
   2\Cancerscript\tablepic2.png"
       width="200" height="200" id="pic2" onclick = "myAlert(1)">
      </td>
     </tr>
     <tr>
      <td>
       <img src="C:\Users\Cain\Documents\School\College\Junior 
   2\Cancerscript\tablepic3.png"
       width="200" height="200" id="pic3" onclick = "myAlert(2)">
      </td>
      <td>
       <img src="C:\Users\Cain\Documents\School\College\Junior 
    2\Cancerscript\tablepic4.png"
       width="200" height="200" id="pic4" onclick = "myAlert(3)">
      </td>
     </tr>
    </table>
    <input type = "button" value = "Rotate" onclick = "rotImage()">
   </body>

   </html>

谢谢

Answer 1

当出现类似的内容时，思考图像本身的独特之处是有帮助的吗？在这种情况下，它是文件名本身。

按图像的来源而不是索引。此代码创建一个对象，其属性名称是相关图像的文件名。这些值是单击图像的次数。

然后，在事件处理程序中，我传递了单击图像的来源。然后我浏览属性名称，找到与文件名匹配的名称，然后递增它。然后提醒新更新的计数。

请注意，有一种方法可以在没有循环的情况下执行此操作，但我会留下该练习让您弄清楚。

＆＃13;

var count = {
  "tablepic1.png": 0,
  "tablepic2.png": 0,
  "tablepic3.png": 0,
  "tablepic4.png": 0
};

function myAlert(src) {
  var keys = Object.getOwnPropertyNames(count);
  for (var i = 0; i < keys.length; i++) {
    var key = keys[i];
    if (src.indexOf(key) > -1) {
      count[key]++;
      alert(src + " " + count[key]);
    }
  }
}

function rotImage() {
  document.getElementById('pic1').src =
    "C:/Users/Cain/Documents/School/College/Junior 2/Cancerscript/tablepic3.png"
  document.getElementById('pic2').src =
    "C:/Users/Cain/Documents/School/College/Junior 2/Cancerscript/tablepic1.png"
  document.getElementById('pic3').src =
    "C:/Users/Cain/Documents/School/College/Junior 2/Cancerscript/tablepic4.png"
  document.getElementById('pic4').src =
    "C:/Users/Cain/Documents/School/College/Junior 2/Cancerscript/tablepic2.png"
}

＆＃13;

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <img src="C:\Users\Cain\Documents\School\College\Junior 
   2\Cancerscript\tablepic1.png" width="200" height="200" id="pic1" onclick="myAlert(this.src)">
    </td>
    <td>
      <img src="C:\Users\Cain\Documents\School\College\Junior 
   2\Cancerscript\tablepic2.png" width="200" height="200" id="pic2" onclick="myAlert(this.src)">
    </td>
  </tr>
  <tr>
    <td>
      <img src="C:\Users\Cain\Documents\School\College\Junior 
   2\Cancerscript\tablepic3.png" width="200" height="200" id="pic3" onclick="myAlert(this.src)">
    </td>
    <td>
      <img src="C:\Users\Cain\Documents\School\College\Junior 
    2\Cancerscript\tablepic4.png" width="200" height="200" id="pic4" onclick="myAlert(this.src)">
    </td>
  </tr>
</table>
<input type="button" value="Rotate" onclick="rotImage()">

＆＃13;

计算点击已移动javascript的图片

1 个答案: