JavaScript：统计被点击的移动图片点击次数问题咨询

Hey there! Let's sort out this click counting problem you're facing. The core issue right now is that you're tracking clicks on the table cell (the position) instead of the actual image itself—so when you rotate images in that cell, the count gets tied to the spot, not the picture. Here's how to fix it:

Step 1: Give Each Image a Unique Identifier #

Add a custom data attribute to every image you want to track. This ID will stay with the image even when you swap out its src during rotation. For example:

<table>
  <tr>
    <td>
      <img src="sunset.jpg" data-img-id="sunset" alt="Sunset">
    </td>
    <td>
      <img src="mountain.jpg" data-img-id="mountain" alt="Mountain">
    </td>
  </tr>
</table>

I used data-img-id here, but you can name it anything as long as it's consistent—just make sure each image has a unique value (like its filename or a custom ID string).

Step 2: Track Counts with a Key-Value Object #

Create an object to store click counts, using each image's unique ID as the key. This lets you map counts directly to individual images, not positions.

Step 3: Bind Click Events to Images (Not Containers) #

Instead of listening for clicks on the table cells, attach the event listener directly to the images. If you're dynamically rotating/adding images, use event delegation on the parent table to catch clicks on any image, even new ones.

Here's the full JavaScript example:

// Initialize an object to hold our click counts
const clickCounts = {};

// Option 1: For static images (already on the page)
const staticImages = document.querySelectorAll('img[data-img-id]');
staticImages.forEach(img => {
  // Set initial count to 0 for each image
  clickCounts[img.dataset.imgId] = 0;
  
  // Bind click event
  img.addEventListener('click', function() {
    const imgId = this.dataset.imgId;
    clickCounts[imgId]++;
    alert(`"${imgId}" has been clicked ${clickCounts[imgId]} times!`);
  });
});

// Option 2: For dynamically rotated/added images (event delegation)
document.querySelector('table').addEventListener('click', function(e) {
  // Check if the clicked element is an image with our data attribute
  if (e.target.tagName === 'IMG' && e.target.dataset.imgId) {
    const imgId = e.target.dataset.imgId;
    // Initialize count to 0 if it doesn't exist yet
    if (!clickCounts[imgId]) clickCounts[imgId] = 0;
    
    clickCounts[imgId]++;
    alert(`"${imgId}" has been clicked ${clickCounts[imgId]} times!`);
  }
});

Why This Works #

When you rotate images (swap their src), the data-img-id stays attached to the image element. Since we're tracking clicks based on this unique ID instead of the cell's position, the count will always be linked to the specific image—no matter which cell it's in or how many times you rotate it.

If your rotation logic replaces the entire <img> element instead of just updating src, just make sure to add the data-img-id attribute to the new image element when you create it. The event delegation method will automatically catch clicks on these new images without needing to rebind listeners!

内容的提问来源于stack exchange，提问作者Cain Kaltenbaugh