Как изменить название цвета при нажатии на кнопку?

Question

Я хочу отобразить имя $colors в зависимости от того, на какую кнопку образца цвета нажимают.Вот мой код для отображения кнопок с цветными образцами, но я не уверен, как мне следует изменить имя $colors в зависимости от того, на что нажимали.У многих крупных брендов есть примеры этого на своих сайтах. Вот пример на Urban Outfitters того, что я хотел бы случиться при изменении цвета.При переключении между цветами в этом примере имя меняется с «Золотого» на «Темно-коричневый».

$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>color всякий раз, когда установлен соответствующий флажок.Из-за использования псевдокласса :checked это также изменит цвет back , когда флажок снят.

Я также отмечаю, что у вас есть имя переменной в селекторе,Хотя это хорошо, это не может быть преднамеренным.Ключ здесь :checked + label;до тех пор, пока вы правильно настроили свой флажок, вышеуказанный селектор будет нацелен на следующий <label>.