Google Model Viewer 变体下拉列表转换答案

【问题标题】：Google Model Viewer Variant Dropdown List ConversionGoogle Model Viewer 变体下拉列表转换
【发布时间】：2021-10-13 08:43:51
【问题描述】：

我正在尝试为我工作的公司创建一个产品配置器，到目前为止，我的 Google 模型查看器可以满足我的需求！我可以更改产品的大小和颜色，但是，我想将变体选择器的“下拉菜单”更改为“网格”，以使其更像按钮而不是下拉列表。因为我现在只有大约一个月的 HTML、CSS 和 JS 工作经验，所以我不知道该怎么做。我有想要填充选项的每种颜色样本的图像。

我也尝试过使用 DDSlick Jquery 来充当包含图像（用于色板颜色）的下拉列表，但我也不知道如何让它工作。

对此的任何帮助将不胜感激！

<div>
  Choose a Color:
  <select id="variant"></select>
</div>

<script>
  const modelViewerVariants = document.querySelector("model-viewer#MalloryChest36");
  const select = document.querySelector('#variant');
  modelViewerVariants.addEventListener('load', () => {
    const names = modelViewerVariants.availableVariants;
    for (const name of names) {
      const option = document.createElement('option');
      option.value = name;
      option.textContent = name;
      select.appendChild(option);
    }
  });
  select.addEventListener('input', (event) => {
    modelViewerVariants.variantName = event.target.value;
  });
</script>

【问题讨论】：

标签： javascript html css model-viewer

【解决方案1】：

经过多次尝试和错误终于让它工作了！

<div class="colors">
   <div id="variant">
   Choose a Color:
   </div>
</div>

<!-- Size Script -->
<script type="module">
  const modelViewer = document.querySelector("model-viewer"); window.switchSrc = (element, name) => { const base = "../Assets/Models/" + name; modelViewer.src = base + '.glb'; const size = document.querySelectorAll(".size"); size.forEach((element) => {element.classList.remove("selected");
  var colors = document.getElementById("variant"); var colorButton = colors.firstChild; while( colorButton ) { colors.removeChild( colorButton ); colorButton = colors.firstChild; }}); element.classList.add("selected"); }; document.querySelector(".sizebuttons").addEventListener('beforexrselect',
  (ev) => { ev.preventDefault(); });
</script>

<!-- Color Script -->
<script type="module">
  const modelViewerVariants = document.querySelector("model-viewer"); const select = document.querySelector('#variant'); modelViewerVariants.addEventListener('load', () => { const names = modelViewerVariants.availableVariants; for (const name of names)
  { const color = document.createElement('button'); color.value = name; color.textContent = name; select.appendChild(color); } }); document.getElementById('variant').addEventListener('click', (event) => { modelViewerVariants.variantName = event.target.value;
  });
</script>

如果其他人需要参考这个，我会留下它。（我根本不是程序员，所以我相信有更简单或更快的方法来做到这一点）

【讨论】：