我正在尝试为我工作的公司创建一个产品配置器,到目前为止,我有谷歌的模型查看器做我想做的事!我可以更改产品的大小和颜色,但是,我想将变体选择器的“下拉菜单”更改为“网格”,以使其更像按钮而不是下拉列表。因为我现在只有大约一个月的 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>