将相关按钮与图像匹配

Question

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

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

这是一个有效的 sn-p

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>

Answer 2

我注意到您在按钮中添加了 img 属性：

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

您可以改用数据属性，如下所述：

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

您的代码如下所示：

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