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

Question

我正在尝试在 Shopify 中为我的色样插入相应的背景图片。 现在，我已经准备好图标，并带有每种颜色的正确链接，但图标没有相应的图像，like this . 我正在尝试插入我的 assets file 中的图像，每个图像都已经以与颜色变化相同的方式命名。如何通过 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>

我完全是 Javascript 的新手，这就是我正在尝试编写的内容，我知道这是错误的，我只是想提供一个想法，谢谢!

$(function() {
    if($(".new-variant-swatchs").length) {

        $(".new-variant-swatchs").each(function(i) {
            var $thisSelect = $(this);
            var $currentOption = $thisSelect.val();

            $thisSelect.find("li").each(function() {
                var $this = $(this);
                var $liText = $this.text();
                var $liVal = $this.val();

                $this.style.backgroundImage = "url({{ $liVal | handle | append: '.' | append: png | asset_url }}"

            }
        });
    }
});

提前致谢!

Answer 1

您可能需要重命名图像以匹配 data-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');       
            });
        });
    }
});

不过，您可能必须放置适当的 Assets 相对路径。