我有一个选项表单，我想为我选择的选项标签的每个元素显示来自 JSON 文件的不同图像

Question

所以我创建了一个选项表单，在这个底部我有一个 div，我想根据我选择的选项表单的声音显示从 JSON 文件中获取的图像。 更具体地说，我将在这里写一些代码：

HTML：

<select name="classes">
  <option value="knight">Knight</option>
  <option value="mage">Mage</option>
  <option value="priest">Priest</option>
</select>

JS：

const classes = [
    {
        id: 1,
        class: "knight",
        male: "../class-png/male-knight.png",
        female:"../class-png/female-knight.png"
    },
    {
        id:2,
        class:"mage",
        male:"../class-png/male-mage.png",
        female:"../class-png/female-mage.png"
    },
    {
        id: 3,
        class: "priest",
        male: "../class-png/male-priest.png",
        female:"../class-png/female-priest.png",
    }
];

因此，如果我选择“骑士”选项，我想在下面的 div 中显示骑士的两个 png，依此类推，以供法师使用。 . .
我会使用 JSON 对象的 id 来做到这一点

Answer 1

你的 html 会是这样

<select class="classes" name="classes">
   <option value="knight">Knight</option>
   <option value="mage">Mage</option>
   <option value="priest">Priest</option>
</select>
<div id="imageWrapper"></div>

这是基于您选择的选项值的 jquery 代码

<script>
    let selectedClass = "knight";
    const classes = [
    {
        id: 1,
        class: "knight",
        male: "../class-png/male-knight.png",
        female:"../class-png/female-knight.png"
    },
    {
        id:2,
        class:"mage",
        male:"../class-png/male-mage.png",
        female:"../class-png/female-mage.png"
    },
    {
        id: 3,
        class: "priest",
        male: "../class-png/male-priest.png",
        female:"../class-png/female-priest.png",
    }
];
// To load Images for pre-selected option
addImage();
$(document).ready(() => {
    $(".classes").change(() => {
        $("#imageWrapper").empty();
        selectedClass = $('.classes :selected').val();
        // change image on option change
        addImage();
    })
})
function addImage (){
    $.each(classes, function( index, value ) {
        if(value.class == selectedClass){
            $("#imageWrapper").prepend('<img id="image" src="'+value.male+'" /><img id="image" src="'+value.female+'" />')
        }
    });
}
</script>