Question

我们在代码中输入颜色名称为：黑色，绿色。

我们将服务器中的图像保存为：black.png，green.png

在网站而不是颜色名称中，显示相关图像。

现在我们需要输入颜色为＆＃34; Bright Pink **，因为当我们在服务器中给出颜色名称pink pink.png时，它不会在网站上显示图像。

问题：对于单字颜色，显示图像，但不是2字颜色。

脚本：

jQuery(document).ready(function(){
    varinner=Array();
    inner=jQuery(".product-options ul.options-list .label>label");
    for(i=0;i<inner.length;i++){
        varclassN=inner[i].innerText;
        if(classN=="Black"||classN=="Green"||classN=="Bright Pink"){
            inner.eq(i).addClass("colors");
            classN=classN.toLowerCase();
            varurlB="http://sitename.com/media/catalog/custom/"+classN+".png";
            inner.eq(i).css('background-image',
            'url('+urlB+')');
        }
    }
});

Answer 1

您可能需要使用以下代码将%20中的空格转义（百分比编码）

text.replace(/ /g, '%20')

如果您发布HTML，我可以将其添加到下面的代码段中以验证其正确性。我还使用正则表达式和jQuery实用程序函数进行了一些更改，以帮助减少代码的大小;如果您有任何问题，请告诉我。

jQuery.fn.ready(function() {
  var inner = jQuery('.product-options ul.options-list .label > label')
  inner.each(function () {
    var text = this.textContent.toLowerCase()
    if (/^(?:black|green|bright pink)$/.test(text)) {
      var url = 'http://sitename.com/media/catalog/custom/' + text.replace(/ /g, '%20') + '.png'
      jQuery(this).addClass('colors').css('background-image', 'url(' + url + ')')
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

网址中不允许使用空格。所以编码空间，它应该工作的文件名

尝试

   classN = encodeURIComponent(classN.toLowerCase());

当文本包含两个单词时，显示图像而不是文本

2 个答案: