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代码段**中链接图像，但是这里有一种香草味的解决方案，可以获取图像的路径。将src元素的img属性设置为等于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 and Forms Tutorial。顺便说一句，属性id是JavaScript和DOM的基本方面，不能轻易被API忽略。 An id must be unique，我收集到您已尝试将一个ID分配给多个元素，因此您毫无保留地假设ID “不起作用” 。如果由于某种原因，您无法通过剪切粘贴到任何内容中来使其正常工作（您并未真正描述如何实现代码），请尝试将所有id更改为name。 bb_data %>% group_by(player) %>% mutate(seasons_played = n_distinct(year)) %>% group_by(player, seasons_played) %>% summarise_at(vars(games, strikeouts), sum) %>% arrange(-strikeouts) %>% ungroup() %>% add_row(player = 'Grand Total', games = NA, seasons_played = NA, strikeouts = sum(.$strikeouts))元素的一个优点是HTMLFormElement API允许id和name之间的无缝关联（它们在表单中可以互换）。

<form>

// 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;
}

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

4 个答案: