我有一個選項表單，我想為我選擇的選項標簽的每個元素顯示來自 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>