Question

我们使用以下代码显示“Black＆amp; Green”图片，而不是“黑与绿”文字。

我们想要的是这个概念应该适用于所有颜色，因为一个解决方案是我需要为数百种颜色编写手动代码 如下所示，使其适用于所有颜色。但我认为这是错误的方式，可能会影响性能，有没有更好的方法来解决这个问题？

脚本：

var jQuery = $.noConflict();
jQuery(document).ready(function(){
    var inner = Array();
    inner = jQuery(" .product-options ul.options-list .label>label");
    for (i=0;i<inner.length;i++){
         var classN = inner[i].innerText;
          if (classN=="Black" || classN=="Green"){
               inner.eq(i).addClass(classN);
          }
     }
});

Css for green：

.product-options ul.options-list .label>label.Green
{ 
     font-weight: normal; 
     width: 50px; 
     height: 50px; 
     border-radius: 50%; 
     background-image: url("http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png") !important; 
     background-size: cover !important; 
     display: block; 
     color: transparent; 
     padding: 0 !important; 
     font-size: 0; 
}

Css for black：

.product-options ul.options-list .label>label.Black
{ 
     font-weight: normal; 
     width: 50px; 
     height: 50px; 
     border-radius: 50%; 
     background-image: url("http://sbdev2.kidsdial.com:81/media/catalog/custom/black.png") !important; 
     background-size: cover !important; 
     display: block; 
     color: transparent; 
     padding: 0 !important; 
     font-size: 0; 
}

Answer 1

可以使用以下颜色数组简化js代码：

var jQuery = $.noConflict();

jQuery(function(){
    var colors = ['Black','Green'];
    var inner = Array();

    jQuery(" .product-options ul.options-list .label>label").each(function(){
        var classN = jQuery(this).text();

        if ( jQuery.inArray(classN, colors) )
            jQuery(this).addClass(classN);
    })
});

你可以在label上对公共属性进行分组：

.product-options ul.options-list .label>label
{
    font-weight: normal; 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    background-size: cover !important; 
    display: block; 
    color: transparent; 
    padding: 0 !important; 
    font-size: 0; 
}

.product-options ul.options-list .label>label.Green
{ 
    background-image: url("http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png") !important;
}
.product-options ul.options-list .label>label.Black
{ 
    background-image: url("http://sbdev2.kidsdial.com:81/media/catalog/custom/black.png") !important; 
}

注意：如果使用jQuery .css()方法，可以避免重复CSS代码：

var jQuery = $.noConflict();

jQuery(function(){
    var colors = ['Black','Green'];
    var images = ['img_1','img_2'];
    var inner = Array();

    jQuery(" .product-options ul.options-list .label>label").each(function(i){
        var classN = jQuery(this).text();

        if ( jQuery.inArray(classN, colors) )
            jQuery(this).css('background-image','url("media/catalog/custom/'+images[i]+'")');
    })
});

希望这有帮助。

Answer 2

您需要将所有可能的颜色名称映射到特定的颜色代码。幸运的是，你可以使用一堆内置的color names。

你可以使用

.product-options ul.options-list .label>label{ 
   font-weight: normal; 
   width: 50px; 
   height: 50px; 
   border-radius: 50%; 
   display: block; 
   color: transparent; 
   padding: 0 !important; 
   font-size: 0; 
}

并在标签的style-attribute中添加实际背景颜色：

<label style="background-color:teal"></label>

根据文本名称显示相关图像

2 个答案: