Javascript 变量可以存储在image或div标记中吗？

我已经设法创建了一个巨大的

div

，其中包含许多附加到它的小

div

，因此它创建了一个网格。我的目标是能够在每个较小的

div

s（tiles）中存储两个变量。目前，通过更改

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

var id=0；//用于为div生成唯一id的变量
var x=0//每个磁贴中的默认值
功能cdiv（ele）{
var div=document.createElement（“div”）；
div.innerHTML='div'+id；
div.id='div'+id++；//det唯一id和增量id值
div.style.width=“50px”；
div.style.height=“50px”；
div.style.background=“red”；//瓷砖的默认颜色
div.style.color=“black”//平铺中值的颜色
div.style.display=“inline block”；//每行的瓷砖数量
div.addEventListener（“单击”，clr）；
div.innerHTML=x；//这是每个磁贴中显示的内容
ele.appendChild（div）；//将此磁贴添加到元素中
}
//我的主容器
var div=document.createElement（“div”）；
div.style.width=“500px”///10倍内底
div.style[“溢出-x”]=“可见”//显示溢出
文件.正文.附件（div）；
//以下函数在上述主容器中生成我的网格
对于（i=0；i<10；i++）{
对于（b=0；b<10；b++）{
cdiv（div）；
}
}
//下面的函数增加每次单击平铺内的值
函数clr（e）{
var clickedElement=document.getElementById（e.currentTarget.id）；
var currentXValue=clickedElement.innerHTML；
单击edelement.style.background=“绿色”；
电流X值++
单击edElement.innerHTML=currentXValue；
}

如何将变量添加到分幅（

div

s在大型容器

div

中），以便以后调用该变量并将其传递到另一个div以显示

我希望有以下三个变量：

• 当前单击的互动程序上的单击次数，如我在 上面的代码，但不显示在该平铺中。只是，把它储存起来 作为某个变量中该平铺的值
• 单击的平铺的X坐标
• 单击的平铺的Y坐标

---

您可以创建无限

数据-[任何]

属性来存储您想要的任何变量

然后可以使用

element.getAttribute（'data-example-name'）访问该变量

这里有一个例子：


var testElement=document.getElementsByClassName（'test'）[0]；
var result=document.getElementById（'result'）；
result.textContent=testElement.getAttribute（'data-my-tag'）
.test{
背景：蓝色；
颜色：白色；
填充：20px 30px；
宽度：300px；
文本对齐：居中；
}

测试合成属性，

数据我的标签=
{应该是一个数字}
我可以想出两种方法来存储每个div的信息：

（1） 在div中存储隐藏的
文件

（2） 将
data something=“Some information”
属性添加到div.code中如下所示：

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

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





data属性可以与许多HTML标记一起使用，包括
实际上，您可以向元素添加任何属性（甚至函数）。比如，如果您的元素有一个
div
变量，那么您只需

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

唯一需要注意的是不要覆盖某些“系统”属性，如
style
和其他属性。
无需转到其他地方。代码非常简单，只需传递一个组合属性，然后稍后使用
getAttribute
调用它。这把小提琴只是为了说明一个有效的例子。。我将把工作示例留在embedded editorI know中，但感谢您将您的代码纳入答案中。不要向对象添加随机属性，它们可能与将来HTML/Javascript规范中添加的内容冲突。这就是为什么要创建
data-*
属性，它们是专门为应用程序创建的。@Barmar是的，谢谢你的提示。是否可以添加具有对象值的属性？仅限于字符串值会很不方便。不幸的是，不是，但您可以使用
JSON.stringify（）
将对象/数组转换为字符串。如果使用jQuery，则可以使用它的
.data（）
方法；它可以将任意对象与元素关联，并将它们存储在内部数据结构中。如果您使用jQuery，您可以使用它的
.data（）
方法将任何数据与元素关联。我刚刚开始学习编程，我听说过很多关于jQuery的内容，但目前需要解决的问题有点多。我想我会好好读一读的，这可能有点多，但它是值得的，因为它让很多事情变得更容易。很好的观点。我很快就会做的。在我解决了这个问题之后，创建一个数据属性。