Question

我设法创建了一个巨大的div，其中包含许多小的div，因此它会创建一个网格。我的目标是能够在每个较小的div s（tile）中存储两个变量。目前，我可以通过更改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坐标

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

的相同代码

Answer 2

我可以想到两种方法来存储每个div的信息：

（1）在div

中存储隐藏的<input type="hidden" value="something" />文件

（2）将data-something="Some information"属性添加到div。代码看起来像：

div.dataset.something = "Some information to pass along";

以下是关于（2）的更多信息：

Set data attribute using JavaScript

https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes

https://www.sitepoint.com/use-html5-data-attributes/

data属性可以与许多HTML标记一起使用，包括<img data-desc="Photo of a dog" />

Answer 3

实际上，您可以向元素添加任何属性（甚至函数）。就像你的元素有div变量一样，你可以只做

div.someProperty = someValue;
div.myFunction = function(...) { ... };

你唯一应该关心的是不要覆盖一些＆＃34;系统＆＃34;像style和其他人一样的财产。

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

3 个答案: