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

Question

所以我创建了一个选项表单，在它的底部有一个 div，我想在其中显示从 JSON 文件中获取的图像，该文件基于我 select。更具体地说，我会在这里写一些代码：

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",
    }
];

所以如果我 select "knight" 选项，我想在下面的 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>

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

I have an option form and I would like to show a different image from a JSON file for each element of the option tag i choose

javascript

jquery

json

html-select