javascript - 变量可以存储在图像或 div 标签中吗？

Question

我成功创建了一个巨大的 div，其中附加了许多小的 div，因此它创建了一个网格。我的目标是能够在每个较小的 div(图 block )中存储两个变量。目前，我可以通过更改 innerHTML 在较小的图 block 中存储一个值，但是，我希望能够存储多个值。

以下是我创建图 block 的代码:

    var id = 0; // variable for generating unique id for divs
    var x = 0;  //default value within each tile


    function cdiv(ele) {
      var div = document.createElement("div");
      div.innerHTML = 'div' + id;
      div.id = 'div' + id++; // det unique id and increment id value
      div.style.width = "50px";
      div.style.height = "50px";
      div.style.background = "red";   //default color of tile
      div.style.color = "black";   //color of value within tile
      div.style.display = "inline-block";   //some amount of tiles per line
      div.addEventListener("click", clr);
      div.innerHTML = x;   //this is what shows inside each tile
      ele.appendChild(div);   //adds this tile to an element

    }

//my master container
    var div = document.createElement("div");
    div.style.width = "500px"; ///10 times of inner divs
    div.style["overflow-x"]= "visible"; // to show overflow
    document.body.appendChild(div);

//following function generates my grid within the above master container
    for (i = 0; i < 10; i++) {
      for (b = 0; b < 10; b++) { 
        cdiv(div);
      }
    }

//following function increments the value inside the tile per click
    function clr(e) {
      var clickedElement = document.getElementById(e.currentTarget.id);
      var currentXValue = clickedElement.innerHTML;
      clickedElement.style.background = "green";
      currentXValue++
      clickedElement.innerHTML = currentXValue;
    }

如何将变量添加到图 block (大型容器 div 中的 div)，以便我稍后可以调用该变量并将其传递到另一个 div显示？

我想要以下三个变量:

• 当前点击图 block 的点击次数，正如我在 上面的代码，但不显示在该图 block 中。只是，储存起来 作为某个变量中该图 block 的值
• 点击图 block 的 X 坐标
• 点击的图 block 的 Y 坐标

Answer 1

您可以创建无限 data-[whatever] 属性来存储您想要的任何变量

然后您可以使用 element.getAttribute('data-example-name'); 访问此变量

这是一个示例:

var testElement = document.getElementsByClassName('test')[0];
var result = document.getElementById('result');
result.textContent = testElement.getAttribute('data-my-tag');

.test {
  background: blue;
  color: white;
  padding: 20px 30px;
  width: 300px;
  text-align: center;
}

<div class="test" data-my-tag="5">
  <h2>testing a made-up attribute, <br>
  data-my-tag = 
    <span id="result">{should be a number}</span>
  </h2>
</div>

相同的代码来自 jsfiddle