javascript - 将相关按钮与图像匹配

Question

我创建了一个收藏夹页面，允许用户保存他们选择的任何项目。每次此页面加载/刷新时，项目和按钮都是随机的。有没有办法在洗牌/随机化后将项目与相关按钮匹配？下面是我制作的一个快速示例的链接。从 JS 中删除注释以“随机播放”图像和按钮。

https://jsfiddle.net/gu7ccv5d/2/

/* var gridOnHomePage = document.querySelector(".grid"), // get the list
    temp = gridOnHomePage.cloneNode(true), // clone the list
    i = temp.children.length + 1;

// shuffle the cloned list (better performance)
while( i-- > 0 )
    temp.appendChild( temp.children[Math.random() * i |0] );

gridOnHomePage.parentNode.replaceChild(temp, gridOnHomePage); */

<div class="grid">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Red_flag.svg/2000px-Red_flag.svg.png" width="50" height="50" />
  <button type="button" class="addToFavorites" color="red" img="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Red_flag.svg/2000px-Red_flag.svg.png">
    Add Red
  </button>
  <img src="http://epochmod.com/forum/uploads/monthly_2015_09/2000px-Solid_blue.svg.png.09e2d6f1de3f9a9192388a1737c19280.png" width="50" height="50" />
  <button type="button" class="addToFavorites" color="blue" img="http://epochmod.com/forum/uploads/monthly_2015_09/2000px-Solid_blue.svg.png.09e2d6f1de3f9a9192388a1737c19280.png">
    Add Blue
  </button>
  <img src="http://greensportsalliance.org/images/darkGreenSquare.gif" width="50" height="50" />
  <button type="button" class="addToFavorites" color="green" img="http://greensportsalliance.org/images/darkGreenSquare.gif">
    Add Green
  </button>
</div>

Answer 1

这是一个工作片段

var gridOnHomePage = document.querySelector(".grid"), // get the list
    temp = gridOnHomePage.cloneNode(true), // clone the list
    i = temp.children.length + 1;

// shuffle the cloned list (better performance)
while( i-- > 0 )
    temp.appendChild( temp.children[Math.random() * i |0] );

gridOnHomePage.parentNode.replaceChild(temp, gridOnHomePage);

<div class="grid">
<span>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Red_flag.svg/2000px-Red_flag.svg.png" width="50" height="50" />
  <button type="button" class="addToFavorites" color="red" img="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Red_flag.svg/2000px-Red_flag.svg.png" >Add Red
  </button>
</span>

<span>
  <img src="http://epochmod.com/forum/uploads/monthly_2015_09/2000px-Solid_blue.svg.png.09e2d6f1de3f9a9192388a1737c19280.png" width="50" height="50" />
  <button type="button" class="addToFavorites" color="blue" img="http://epochmod.com/forum/uploads/monthly_2015_09/2000px-Solid_blue.svg.png.09e2d6f1de3f9a9192388a1737c19280.png" >Add Blue 
  </button>
</span>
<span>
 <img src="http://greensportsalliance.org/images/darkGreenSquare.gif" width="50" height="50" />
  <button type="button" class="addToFavorites" color="green" img="http://greensportsalliance.org/images/darkGreenSquare.gif" >Add Green
  </button>
</span>
</div>