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

我已经成功地创建了一个巨大的div其中包含许多小divs 附加到它上面，所以它创建了一个网格。我的目标是能够在每个较小的变量中存储两个变量divs（瓷砖）。目前，我可以通过更改较小的图块来存储一个值innerHTML，但是，我希望能够存储的不仅仅是这个值。

以下是我创建图块的代码：

    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;
    }

如何向图块添加变量（div在大容器内div），以便我稍后可以调用该变量并将其传递给另一个 div 来显示？

我想要以下三个变量：

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

你可以创建infinite 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 http://var%20testElement%20=%20document.getElementsByClassName('test')%5B0%5D;%20var%20result%20=%20document.getElementById('result');%20result.textContent%20=%20testElement.getAttribute('data-my-tag');