Question

我希望显示$colors名称，具体取决于单击的色样按钮。这是显示颜色样本按钮的代码，但是我不确定如何根据单击的内容更改$colors名称。许多大型品牌零售商在其网站上都有此示例。 Here is an example on Urban Outfitters是我希望在更改颜色时发生的事情。在本示例中，当在颜色之间切换时，名称从“ Gold”更改为“ Taupe”。

$colors: ( 
 'color-Navy'                  #2D2F3C,
 'color-Ash'                   #EEF0F2,
 'color-Black'                 #060606,
 'color-White'                 #F6F6F6,
 'color-Charcoal'              #59545A,
);

@each $color in $colors {
 $colorName: nth($color, 1);
 $bgColor:   nth($color, 2);

#ProductSelect-option-#{$colorName} + label {
  background-color: $bgColor;
  color: $bgColor;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 25px;
  margin: 5px;
  text-indent: 100%;
  white-space: nowrap;
 }

#ProductSelect-option-#{$colorName}:checked + label {
 border-color: #555;
 border-width: 3px;
 }
}

Answer 1

假设您的CSS选择器正确无误，您只需设置color即可

#ProductSelect-option-#{$colorName}:checked + label

例如：

#ProductSelect-option-#{$colorName}:checked + label {
  color: $colorName;
}

只要选中相应的复选框，这将更新<label>的{{1}}。由于使用了color伪类，因此如果取消选中该复选框，也会更改 back 的颜色。

我还注意到，选择器中有变量名。虽然很好，但这可能不是故意的。此处的密钥为:checked；只要您正确定位了复选框，上面的选择器就会定位到下一个:checked + label。

单击按钮时如何更改“颜色”名称？

1 个答案: