如何在单击按钮时提交多个值

Question

如何在"点击"按钮上提交多个值？我基本上有一个3D模型，我试图同时切换多个纹理(baseColor、normal和粗糙度(。通过阅读，我发现我可以使用"数据值"为单个按钮分配多个路径/值，但我不确定如何将这些路径/值分别传递给"createAndApplyTexture"。我想我需要使用类似innerHTML的东西，而不是querySelector？

<p>Body</p>
<div id="body">
<button value="../Textures/ZebraWood_BaseColor.png" data-value="../Textures/WoodNorm.png" data-value2="../Textures/WoodORM.png">Zebra Wood</button>
<button value="../Textures/AstraBlue_BaseColor.png" data-value="../Textures/LacquerNrm.png" data-value2="../Textures/LacquerORM.png">Astro Blue</button>
<button value="../Textures/Charlotte_BaseColor.jpg" data-value="../Textures/CharlotteGrasscloth_normal.jpg" data-value2="../Textures/Charlotte_ORM.jpg">Charlotte</button>
</div>
<script type="module">
const modelViewerTexture1 = document.querySelector("model-viewer#helmet");

modelViewerTexture1.addEventListener("load", () => {

const material = modelViewerTexture1.model.materials[1];

const createAndApplyTexture = async (channel, event) => {
const texture = await modelViewerTexture1.createTexture(event.target.value);
if (channel.includes('base') || channel.includes('metallic')) {
material.pbrMetallicRoughness[channel].setTexture(texture);
} else {
material[channel].setTexture(texture);
}
}
document.querySelector('#body').addEventListener('click', (event) => {
createAndApplyTexture('baseColorTexture', event);
createAndApplyTexture('normalTexture', event);
});
});
</script>

Answer 1

只需访问数据集属性

document.querySelector('#body').addEventListener('click', e => {
console.log(e.target.value, e.target.dataset.value, e.target.dataset.value2)
})

<div id="body">
<button value="../Textures/ZebraWood_BaseColor.png" data-value="../Textures/WoodNorm.png" data-value2="../Textures/WoodORM.png">Zebra Wood</button>
<button value="../Textures/AstraBlue_BaseColor.png" data-value="../Textures/LacquerNrm.png" data-value2="../Textures/LacquerORM.png">Astro Blue</button>
<button value="../Textures/Charlotte_BaseColor.jpg" data-value="../Textures/CharlotteGrasscloth_normal.jpg" data-value2="../Textures/Charlotte_ORM.jpg">Charlotte</button>
</div>