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

Question

我正在尝试在 Shopify 中为我的色样插入相应的背景图片。现在，我已经为每种颜色准备好图标 link，但图标没有相应的图像 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');       
            });
        });
    }
});

尽管如此，您可能必须放置正确的资源相对路径。

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

How to insert the corresponding image to color swatch using Javascript?

html

javascript

css

shopify