javascript - 如何为js中的每张照片制作不同的计数器？

Question

我在 js 中遇到了计数器的问题，我制作了 3 个具有不同 id 的 img 标签，但是在为每个计数器添加 if 语句时遇到了困难？如何查看点击了哪张照片？

var count = 0;

function promptImg() {
  var count1 = document.getElementById(test1)
  var count2 = document.getElementById(test2)
  var count3 = document.getElementById(test3)
}

<div id="flowers">
  <div class="1">
    <img id="test1" onclick="promptImg()" src="rosa-avon-crvena-ajevke-52-373-standard-1.png">
  </div>
      
  <div class="2">
    <img id="test2" onclick="promptImg()" src="gerbera.jpg">
  </div>
      
  <div class="3">
    <img id="test3" onclick="promptImg()" src="gipsofila.jpg">
  </div>
</div>

标签： javascripthtml

Answer 1

如果您想知道如何确定单击了哪个图像，请确保传递this给分配给该onclick属性的函数。

要跟踪点击频率，您可以使用 object 或 aSet来存储与图像 ID 相关联的计数。

const counter = { };

function promptImg(img) {
  counter[img.id] = (counter[img.id] || 0) + 1;
  console.log(JSON.stringify(counter));
}

body div {  
  display: flex;
  flex-direction: row;
  grid-column-gap: 1em;
  align-content: center;
}

.as-console-wrapper { max-height: 2.667em !important; }

<div id="flowers">
  <div class="1">
    <img id="test1" onclick="promptImg(this)" src="http://placekitten.com/120/60" />
  </div>
  <div class="2">
    <img id="test2" onclick="promptImg(this)" src="http://placekitten.com/150/75" />
  </div>
  <div class="3">
    <img id="test3" onclick="promptImg(this)" src="http://placekitten.com/160/80" />
  </div>
</div>

或使用 将点击存储为数据属性dataset。

const counter = { };

const displayClickFrequency = () =>
  console.log(JSON.stringify([...document.querySelectorAll('img')]
    .reduce((map, img) => ({
      ...map,
      [img.id]: parseInt(img.dataset.clicked, 10) || 0
    }), {})));

function promptImg(img) {
  const previousValue = parseInt(img.dataset.clicked, 10) || 0;
  img.dataset.clicked = previousValue + 1;
  displayClickFrequency();
}

body div {  
  display: flex;
  flex-direction: row;
  grid-column-gap: 1em;
  align-content: center;
}

.as-console-wrapper { max-height: 2.667em !important; }

<div id="flowers">
  <div class="1">
    <img id="test1" onclick="promptImg(this)" src="http://placekitten.com/120/60" />
  </div>
  <div class="2">
    <img id="test2" onclick="promptImg(this)" src="http://placekitten.com/150/75" />
  </div>
  <div class="3">
    <img id="test3" onclick="promptImg(this)" src="http://placekitten.com/160/80" />
  </div>
</div>