如何设置图像以根据下拉选择进行更改？

Question

抱歉，如果您之前已回答过此问题，请尝试搜索，但没有找到任何有助于解决此问题的信息。 关于这个问题！

我正在尝试更新Roll20的社区字符表。 该工作表同时使用HTLM和Javascript。 我正在尝试设置表格，以便当玩家选择他正在使用的咒语的力量类型时（从D＆D想到咒语学校），它将一个不同的图标放置到该咒语的按钮上。

这些咒语包含在repeating_spell容器的HTML按钮组件中，该容器旨在为每个咒语创建新的唯一按钮。

无论电源类型如何，我都能成功地使图像成为静态图像，而同一图像，但是我不确定如何根据电源类型动态更改HTML img标签。

我最近意识到，我正在为此字符表设计的网站不允许在img标签中使用id标志。 我已经编辑了代码以显示更改。 我目前正在尝试使用name =标志来执行此操作，并且我不确定jQuery是否找到它，因为我没有返回任何图像。 这是我的img标签的当前代码：

<img name="powertype" src="#" style="width: 15px; height: 15px; padding: 2px;">

在if / else循环中设置了适当的JS / jQuery引用，该循环使用以下代码检查下拉菜单中设置的属性：

on("change:spellschool", function(eventinfo){
  getAttrs(["spellschool"], function(v) {
    var spell_school = spellschool.toLowerCase();
    if(spell_school === "biotic") {
      document.getElementById("powertype").src = "https://n7.world/images/spells/biotic.svg";
    }
    else if(spell_school === "combat") {
      document.getElementById("powertype").src = "https://n7.world/images/spells/combat.svg";
    }
    else if(spell_school === "tech") {
      document.getElementById("powertype").src = "https://n7.world/images/spells/tech.svg";
    }
    else {
      return;
    }
  });
});

但是，当我设置了以上代码时，它仅返回带有填充的空白图像。

Answer 1

您的JS中有一些语法错误-

第6行缺少开始引号：
第10行缺少结尾括号：

除此之外..我为您简化了它：

 $('#spellschool').on('change', function(eventinfo){ if(this.value == "biotic") { document.getElementById("powertype").src = "https://n7.world/images/spells/biotic.svg"; } else if(this.value === "combat") { document.getElementById("powertype").src = "https://n7.world/images/spells/combat.svg"; } else if(this.value === "tech") { document.getElementById("powertype").src = "https://n7.world/images/spells/tech.svg"; } else { return; } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img id="powertype" src="#" style="width: 15px; height: 15px; padding: 2px;"> <select id="spellschool"> <option>Select one</option> <option value="biotic">biotic</option> <option value="combat">combat</option> <option value="tech">tech</option> </select>

Answer 2

我无法在SO代码段**中链接图像，但是这里有一种香草味的解决方案，可以获取图像的路径。 将img元素的src属性设置为等于pathSpan.innerHTML可以显示.png或.jpg，因此，除非.svg的行为不同，否则应处理您的用例。

 const dropdown = document.getElementById("dropdown"), pathSpan = document.getElementById("imgPath"); dropdown.addEventListener("change", updateImage); function updateImage(event){ if(event.target.value == "1"){ pathSpan.innerHTML = "images/one"; } else if(event.target.value == "2"){ pathSpan.innerHTML = "images/two"; } else if(event.target.value == "3"){ pathSpan.innerHTML = "images/three"; } else{ pathSpan.innerHTML = ""; } }

 <select id="dropdown"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br /> <span>Path to image: </span><span id="imgPath">images/one</span>

**我坐好了。 扎克（Zak）的答案已证明，将其链接到网络上的公共可用图像效果很好。 （在生产中，您可能希望链接到本地存储在服务器上的图像，只是为了避免外部站点的更改破坏代码。）

Answer 3

您也可以使用Vanilla JS进行相同的操作。

HTML：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <select id='spellschool'>
        <option value="biotic">Biotic</option>
        <option value="combat">Combat</option>
        <option value="tech">Tech</option>
    </select>

    <img id="powertype" src="#" style="width: 150px; height: 150px; padding: 20px;">
    <script src="main.js"></script>
</body>
</html>

JS：

const select = document.querySelector('#spellschool');
const img = document.querySelector('#powertype');

select.addEventListener('change', () => {
    if (select.value === 'biotic') {
        img.src = 'https://n7.world/images/spells/biotic.svg'
    } else if (select.value === 'combat') {
        img.src = 'https://n7.world/images/spells/combat.svg'
    } else {
        img.src = 'https://n7.world/images/spells/tech.svg'
    }
})

还有更好的例子

const select = document.querySelector('#spellschool');
const img = document.querySelector('#powertype');

select.addEventListener('change', (e) => {

    img.src = `https://n7.world/images/spells/${e.target.value}.svg`

    console.log(e.target.value)
})

我们使用es6``（背包）将所选值可变为字符串。

Answer 4

演示中将评论详细信息。 请参阅JavaScript和表单教程 。 顺便说一句，属性id是JavaScript和DOM的基本方面，不能轻易被API忽略。 一个id必须是唯一的 ，我收集到您试图将一个id分配给一个以上的元素，因此您毫不犹豫地认为id “不起作用” 。 如果由于某种原因，您无法通过剪切粘贴到任何内容中来使其正常工作（您并未真正描述如何实现代码），请尝试将所有id更改为name。 <form>元素的一个优点是HTMLFormElement API允许id和name之间的无缝关联（它们可以在表单中互换）。

 // Array of images const symbols = [ 'https://i.ibb.co/StzKvdm/8.gif', 'https://i.ibb.co/6Jtv9mK/nec.gif', 'https://i.ibb.co/6BMt5f9/inv.gif', 'https://i.ibb.co/FgznhXj/abj.gif', 'https://i.ibb.co/Jk6X5wk/div.gif', 'https://i.ibb.co/wwX9xz5/ill.gif', 'https://i.ibb.co/wKqcxxF/trn.gif', 'https://i.ibb.co/86gpFf1/cnj.gif', 'https://i.ibb.co/R6BRtn9/enc.gif' ]; // Reference the first form on page const form = document.forms[0]; // Collect all inputs, selects, buttons, fieldsets, etc. const cast = form.elements; // Reference select const schools = cast.schools; // Register select to the change event -- call function changeSymbol() schools.onchange = changeSymbol; /** changeSymbol(event) @Param: event [object]: default Event.Object As the select changes value so does the src of the element that is in front of it. //A Pass event object //B Get event.target (select#schools) value and convert it to a real number //C Get the element that is in front of select //D Change that element's src to the url in symbols array at the index of select value //E* Change the data-idx value to index of select value as well //F End function */ function changeSymbol(event) { //A const index = Number(event.target.value); //B const images = event.target.nextElementSibling; //C images.src = symbols[index]; //D images.dataset.idx = index; //E* [OPTIONAL] return false; //F } // Register form to submit event -- call function magic() form.onsubmit = magic; /** magic(event) @Param: event [object]: default Event.Object This is left open for whatever purpose when the image is clicked //A Pass event object //B Prevent the form from sending data to a server */ function magic(event) { //A event.preventDefault(); //B }

 :root { font: 700 small-caps 3vw/2 'Tempus Sans ITC'; } body { color: #fff; background: #000; } legend { font-size: 2rem } select, input { display: inline-block; font: inherit; line-height: 2rem; vertical-align: top; margin: 0 10px; } select { font-size: 1.5rem; }

 <form> <fieldset> <legend>Schools of Magic</legend> <select name='schools'> <option value='0' selected>Select a School</option> <option value='1'>Necromancy</option> <option value='2'>Invocation</option> <option value='3'>Abjuration</option> <option value='4'>Divination</option> <option value='5'>Illusion</option> <option value='6'>Transmutation</option> <option value='7'>Conjuration</option> <option value='8'>Enchantment</option> </select> <input name='images' src='https://i.ibb.co/StzKvdm/8.gif' type='image' width='220' height='220' data-idx='0'> </fieldset> </form>

如何设置图像以根据下拉选择进行更改？

问题描述

4 个解决方案

解决方案1
3 2019-07-18 21:57:22

解决方案2
1 2019-07-18 22:20:25

解决方案3
0 2019-07-18 22:41:31

解决方案4
0 2019-07-20 19:35:03

如何设置图像以根据下拉选择进行更改？

问题描述

4 个解决方案

解决方案1 3 2019-07-18 21:57:22

解决方案2 1 2019-07-18 22:20:25

解决方案3 0 2019-07-18 22:41:31

解决方案4 0 2019-07-20 19:35:03

解决方案1
3 2019-07-18 21:57:22

解决方案2
1 2019-07-18 22:20:25

解决方案3
0 2019-07-18 22:41:31

解决方案4
0 2019-07-20 19:35:03