如何使用Javascript将相应的图像插入到色样中？

我正在尝试在Shopify中为我的色样插入相应的背景图像。 现在，我已经准备好了我的图标，每个颜色都有适当的链接，但是图标没有相应的图像。 我正在尝试插入我的中的图像，每个图像都已经以与颜色变化相同的方式命名。如何通过Javascript将每个图像分配给相应的图标？我知道我可以在Liquid中实现，但它不适合我，因为所有html都是由Javascript生成的。 这是我的html

<ul class="new-variant-swatchs">
  <li class="new-variant-swatch js-new-variant-swatch is-active" data-val="Army Green" data-select="js-option-selector-0"></li>
  <li class="new-variant-swatch js-new-variant-swatch" data-val="Burgundy" data-select="js-option-selector-0"></li>
  <li class="new-variant-swatch js-new-variant-swatch" data-val="Camel Beige" data-select="js-option-selector-0"></li><li class="new-variant-swatch js-new-variant-swatch" data-val="Candy Red" data-select="js-option-selector-0"></li>
  <li class="new-variant-swatch js-new-variant-swatch" data-val="Caramel Brown" data-select="js-option-selector-0"></li><li class="new-variant-swatch js-new-variant-swatch" data-val="Charcoal Grey" data-select="js-option-selector-0"></li>
  <li class="new-variant-swatch js-new-variant-swatch" data-val="Heather Grey" data-select="js-option-selector-0"></li><li class="new-variant-swatch js-new-variant-swatch" data-val="Ivory White" data-select="js-option-selector-0"></li>
  <li class="new-variant-swatch js-new-variant-swatch" data-val="Muted Black" data-select="js-option-selector-0"></li><li class="new-variant-swatch js-new-variant-swatch" data-val="Navy Blue" data-select="js-option-selector-0"></li>
  <li class="new-variant-swatch js-new-variant-swatch" data-val="Rose Pink" data-select="js-option-selector-0"></li>

</ul>

---

提前谢谢你

您可能需要重命名图像以匹配数据val属性值。例如，现在Camel-Beige.png可能需要重命名为Camel-Beige.png

接下来，您需要相应地更改javascript代码，如下所示：

$(function() {
    if($(".new-variant-swatchs").length) {
        $(".new-variant-swatchs").each(function(i) {
            var $thisSelect = $(this);
            var $currentOption = $thisSelect.data('val');
            $thisSelect.find("li").each(function() {
                var $this = $(this);
                var $liText = $this.text();
                var $liVal = $this.data('val');
                $this.css('background', 'url(/assets/'+$liVal+'.png) no-repeat');       
            });
        });
    }
});

---

您可能需要设置正确的资产相对路径。

请在下面找到我的答案，并让我知道这是否适合您。嗨，安克尔，谢谢您的帮助，您的答案似乎有效，再次感谢您，唯一的问题是我认为路径不完全正确，我无法设置正确的相对路径，由于我是Shopify的新手，我认为它可能类似于“{{$liVal+'.png'|asset_url}”，因为这些图像不在www.website.com/assets/image下，您能帮我完成最后一块吗？非常感谢。很抱歉再次打扰您，我还有一个关于图片名称的问题，我想我需要将名称之间的空格替换为下划线，以使其正常工作，因为图片的url是www.website.com/assets/Camel_Beige.png，我需要将Camel_Beige制作成Camel_Beige，价格为$liVal，您知道怎么做吗？谢谢这应该是一件非常简单的事情。可以对相同的$liVal=$liVal.replace（//g，“”）使用字符串操作；或$liVal=$liVal.split（“”）.join（“”）；

$(function() {
    if($(".new-variant-swatchs").length) {
        $(".new-variant-swatchs").each(function(i) {
            var $thisSelect = $(this);
            var $currentOption = $thisSelect.data('val');
            $thisSelect.find("li").each(function() {
                var $this = $(this);
                var $liText = $this.text();
                var $liVal = $this.data('val');
                $this.css('background', 'url(/assets/'+$liVal+'.png) no-repeat');       
            });
        });
    }
});