从图像名称生成信息

Question

我已经尝试在网上搜索答案，但事先没有找到任何道歉......

假设我有一个名为“ designs ”的文件夹，其中包含图片

design1_main_front.png
design1_mockup-black.png
design1_mockup-white.png

design2_main_front.png
design2_mockup-black.png
design2_mockup-yellow.png
design2_mockup-red.png

• 我想要的只是逐个检索带有“ _front ”并将它们添加到课程中
• 将“ _front ”添加到“ img ”标记
• 将带有'模型'的标签添加到select-options标签中，如果我点击下拉列表并点击颜色的名称，img src将更改为 designx_mockup- “的颜色”。为png （应从图像标题中检索颜色名称）

我希望明白这一点很清楚，我将非常感谢您的帮助

Answer 1

首先为两个正面图像添加图像元素。每个图像标签都应该有一个id。

<img src="some_image.jpg" id="image_one">

然后创建一个选择框并将每个选项的值设置为您想要的文件名

<select onchange="updateImage(this);">
  <option value="design1_mockup-black.png" >Black</option>
</select> 

更新图像功能将接收事件的dom节点（选项）。然后，您可以获取值并将图像设置为新文件。