Javascript 将相关按钮与图像匹配

我创建了一个收藏夹页面，允许用户保存他们选择的任何项目。每次加载/刷新此页面时，项目和按钮都是随机的。是否有一种方法可以将项目与随机排列/随机排列后的相关按钮相匹配？下面是我举的一个简单例子的链接。删除JS中的注释以“洗牌”图像和按钮

/*var gridOnHomePage=document.querySelector（“.grid”），//获取列表
temp=gridOnHomePage.cloneNode（true），//克隆列表
i=临时儿童长度+1；
//洗牌克隆列表（性能更好）
而（i-->0）
临时附加子对象（临时子对象[Math.random（）*i|0]）；
gridOnHomePage.parentNode.replaceChild（临时，gridOnHomePage）*/

加红色
加蓝色
加绿色
我注意到您在按钮中添加了一个
img
属性：

<button type="button" class="addToFavorites" color="blue" img="http://epochmod.com/forum/uploads/monthly_2015_09/2000px-Solid_blue.svg.png.09e2d6f1de3f9a9192388a1737c19280.png">

这里是一个工作片段


var gridOnHomePage=document.querySelector（“.grid”），//获取列表
temp=gridOnHomePage.cloneNode（true），//克隆列表
i=临时儿童长度+1；
//洗牌克隆列表（性能更好）
而（i-->0）
临时附加子对象（临时子对象[Math.random（）*i|0]）；
gridOnHomePage.parentNode.replaceChild（临时，gridOnHomePage）

加红色
加蓝色
加绿色
好的，谢谢。我来看看，试试看。我对jQuery还是相当陌生，所以当使用yourButton JS时，我需要将其包含在我的“shuffle”函数中还是单独使用？不，我只回答如何将图像url属性添加到按钮以及如何访问它。您必须将其添加到随机代码中。如果我在图像周围使用数字标记，您会有什么建议？当我尝试在中断内容流样式中使用图形标记时，您的图形标记如“figure{display:inline block；width:whatever；height:whatever；margin:auto；}”。应该可以。如果这确实解决了问题，请勾选答案作为“解决”…D
<button type="button" class="addToFavorites" color="blue" data-img="http://epochmod.com/forum/uploads/monthly_2015_09/2000px-Solid_blue.svg.png.09e2d6f1de3f9a9192388a1737c19280.png">

yourButton = document.getElementsByClassName("addToFavorites");
imageDataAttribute = yourButton.dataset.img;