Question

脚本为：

<code>
  <script>
  // set up the base pattern
  var pattern = Trianglify({
    height:210,
    width: 360,
x_colors:'random',
    cell_size: 20 })
  // svg
  document.getElementById("img").appendChild(pattern.svg())
// select the div (or someting) to generate a svg image.
  </script>
</code>

一个名为“ trianglify”（https://github.com/qrohlf/trianglify）的插件。

问题是，我要选择和填充多个div，但是运行此脚本时，它只会为所有div生成一个随机代码，因此所有div的结果都相同。

我想到的一种正常而愚蠢的方法是将此脚本复制到需要结果的每个位置，但是它看起来并不酷也不干净。

在这种情况下，是否有更好的方法来获得几种不同的随机模式？

就像遇到一个小脚本->加载主脚本以生成->下一个小脚本...。如何在js中实现？

赞赏任何建议。

Answer 1

构建一个接受可配置项的函数，然后在需要时运行该函数。这样可以节省代码重复。

function RunTriangle(height, width, colors, cellSize, element) {
      var pattern = Trianglify({
          height:height,
          width: width,
          x_colors:colors,
          cell_size: cellSize
      })

      document.getElementById(element).appendChild(pattern.svg())
}

然后这样称呼（我在这里使用原始数据）：

RunTriangle(210, 360, 'random', 20, 'img');

如果要多次运行，请将所有项目的Dictionary设为objects，然后对其进行迭代，并使用对象属性调用此方法。

const triangles = {
    first: {
        height: 100,
        width: 20,
        colors: 'random',
        cellSize: 10,
        element: 'anotherElement'
    },
    // repeat this however many times you want
};

然后您可以像这样使用它：

const configurableTriangles = Object.keys(triangles);

for(let key in configurableTriangles) {
    const current = triangles[key];
    RunTriangle(current.height, current.width, current.colors, current.cellSize, current.element
}

这将从对象中获取每个已配置的Triangle，然后针对您正在执行的操作运行它。

Answer 2

您可以选择要填充的所有元素，并使用循环生成新的svg并将其附加到每个元素。

js-tri-fill是每个div的类名称。

 var divsList = document.querySelectorAll('.js-tri-fill');
 divsList.forEach(function(ele, index) {
    var pattern = Trianglify({
        height:210,
        width: 360,
        x_colors:'random',
        cell_size: 20 });
    ele.appendChild(pattern.svg())
})

有没有更好的方法可以在一个html页面上多次运行JavaScript？

2 个答案: