Javascript 基于文本名称显示相关图像

在下面代码的帮助下，我们将显示“黑色和绿色”图像，而不是“黑色和绿色”文本

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

脚本：

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);
          }
     }
});

.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; 
}

.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; 
}

黑色Css:

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);
          }
     }
});

.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; 
}

.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; 
}

---

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);
    })
});

在CSS中，您可以将公共属性分组到

标签上

：

.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]+'")');
    })
});

---

希望这能有所帮助。

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);
    })
});

在CSS中，您可以将公共属性分组到

标签上

：

.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]+'")');
    })
});

---

希望这有帮助。

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

有了它，你可以

.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; 
}

并在标签的“样式”属性中添加实际背景色：

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

---

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

有了它，你可以

.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; 
}

并在标签的“样式”属性中添加实际背景色：

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

至少对于css，您可以将标签下的所有常用属性分组，例如宽度、高度、边框半径等，然后仅更改指定新标签的颜色class@DavePlug如果我们使用css图标而不是图像，我们能用更少的代码工作吗？这取决于你所说的“css图标”的具体含义@CBroe请检查：所以实际上只是普通的HTML元素，带有背景色和边框半径…Dave所说的当然也适用于此。至少对于css，您可以将所有常用属性分组到标签下，例如宽度、高度、边框半径等，然后仅更改指定新颜色的颜色class@DavePlug如果我们使用css图标而不是图像，我们能用更少的代码工作吗？这取决于你所说的“css图标”的具体含义@CBroe请检查：实际上只有普通的HTML元素有背景色和边框半径…Dave所说的当然也适用于此。谢谢，你能检查一下吗，在使用

js

code之后，它现在不显示图像了…删除

{

if（$.inArray（classN，colors））末尾的

{

{，应该是

如果（$.inArray（classN，colors））

也用真实链接替换

img\u 1/img\u 2

，我正在和你核对，我们也要用

jQuery

替换所有的美元

$

，检查我的更新。

{

回来了，请再次删除它。谢谢，在使用

js

code之后，请检查它现在没有显示图像…..删除

{

在

if（$.inArray（classN，colors））{

，应该是

if（$.inArray（classN，colors））

也用真实的链接替换

img\u 1/img\u 2

，我正在和你核对，我们还要用

jQuery

替换所有的美元

$

，检查我的更新。

{

回来了，请再次删除它。我按你说的那样尝试了，但没有为我工作，请你更新更多详细信息……我按你说的那样尝试了，但没有为我工作，请你更新更多详细信息。。。。。