javascript - 根据下拉菜单更改图像 src

Question

我正在使用 Shopify 平台，我尝试将标志图像添加到我的货币转换器

以下是我的货币转换器代码

<select id="currencies" class="currencies" name="currencies" data-default-shop-currency="{{ shop.currency }}">
  {% capture codes %},USD,EUR,GBP,CAD,ARS,AUD,ILS,BBD,BDT,BSD,BHD,BRL,BOB,BND,BGN,MMK,KYD,CLP,CNY,COP,CRC,HRK,CZK,DKK,DOP,XCD,EGP,XPF,FJD,GHS,GTQ,GYD,GEL,HKD,HUF,ISK,INR,IDR,NIS,JMD,JPY,JOD,KZT,KES,KWD,LVL,LTL,MXN,MYR,MUR,MDL,MAD,MNT,MZN,ANG,NZD,NGN,NOK,OMR,PKR,PYG,PEN,PHP,PLN,QAR,RON,RUB,SAR,RSD,SCR,SGD,SYP,ZAR,KRW,LKR,SEK,CHF,TWD,THB,TZS,TTD,TRY,UAH,AED,UYU,VEB,VND,ZMK,{% endcapture %}
  {% assign supported_codes = settings.supported_currencies | split: ' ' %}
  <option value="{{ shop.currency }}" selected="selected">{{ shop.currency }}</option>
  {% for code in supported_codes %}
    {% if code != shop.currency and codes contains code %}
    <option value="{{ code }}">{{ code }}</option>
    {% endif %}
  {% endfor %}
</select>

这是我制作的 Java:

var flagsArray = [
  "https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/usa.png?18222330839739856022", // USD,
  "https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/GBP.png?10208443253961150348", // GBP,
  "https://cdn.shopify.com/s/files/1/2078/5043/t/59/assets/ILS.png?16971579683524372576"  // ILS ...
];

$('#currencies').change(function(){
  $('#flags')[0].src = flagsArray[this.value];
});

它应该在值改变时改变图片。

(值(value)最多为美元、英镑等...不能是数字，因为这是货币兑换商的构建方式)

这是当我更改货币时应该更改的 img:

<img id="flags" src='//cdn.shopify.com/s/files/1/2078/5043/t/59/assets/usa.png?18222330839739856022'>

我不知道我做错了什么，如果有人能告诉我那就太好了:) 谢谢:)

Answer 1

您正在使用数组的值而不是数组的索引。您可以使用 .indexOf()或 .findIndex()获取与 select 的当前值匹配的数组索引元素，您似乎在其中设置了 value <option> 的属性元素

<option value="{{ code }}">{{ code }}</option>

设置为 flagsArray 的字符串JavaScript 中的元素而不是与 flagsArray 的索引相对应的索引应该引用一下

flagsArray[flags.indexOf(this.value)];

或

flagsArray[flags.findIndex(function(text){return text === this.value})];

或者，您可以设置 value的 <option>应匹配的数组索引对应的元素

<option value="{{ index //? }}">{{ code }}</option>

使用当前代码的能力