Как мне настроить таргетинг на правильный атрибут данных и дочерний элемент при работе с несколькими вхождениями одного и того же родительского элемента?

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть пользовательский элемент слайдера. Я хочу отобразить много элементов слайдера на одной странице, но проблема в том, что динамический стиль CSS нацелен на общие имена атрибутов, поэтому, если у меня есть два элемента #sliderA и #sliderB , изменения, которые должны произойти #sliderB , произойдут sliderA вместо этого.

Я полагаю, мне требуется JavaScript для таргетинга на data-freq атрибут соответствующего элемента слайдера.

https://codepen.io/ryanvb92/pen/poNLQEO

Как вы можете догадаться, я работаю с чужим пером. Вот оригинальное перо.

1. вы пробовали уникальный идентификатор для каждого слайдера и использовали css на основе идентификатора слайдера

2. Но я хочу одинаковую функциональность для каждого .custom-slider . Разве использование CSS не потребовало бы от меня постоянного обновления файла CSS каждый раз, когда я добавляю новый экземпляр элемента, или я что-то упускаю?

3. Ваш вопрос сбивает с толку. В вопросе вы говорите, что хотите иметь #sliderA и #sliderB отличаться, но ваше перо не включает эти идентификаторы. Также в комментарии вы хотите, чтобы они были одинаковыми? Что это другое или то же самое?

4. Кстати, идентификатор form-title дублируется.

Ответ №1:

Css довольно прост

 input {
        amp;:checked {
              label::after {
                border-width: 4px;
                transform: translate(-50%, -50%) scale(0.75);
            }
  ....

Приведенное выше правило используется для оформления проверяемого ввода и работает должным образом. Единственная проблема заключается в том, что вы предоставляете одинаковое id для нескольких input тегов.

   <input type="radio" name="smokingFreq" id="1" value="1" required>
        
  <input type="radio" name="drinkingFreq" id="1" value="1" required>

Обратите внимание, как входные элементы используют один и тот же идентификатор в разных ползунках. Дублирование идентификаторов строго избегается, поскольку браузер ожидает, что они будут уникальными во всем документе.

Просто используйте уникальные идентификаторы для всех входных данных. Что-то вроде этого должно решить вашу проблему.

   <input type="radio" name="smokingFreq" id="smokingFreq-1" value="1" required>

  <input type="radio" name="drinkingFreq" id="drinkingFreq-1" value="1" required>

1. Да, моя неосторожная ошибка. Однако проблема все еще не решена, поскольку CSS, похоже, зависит от целочисленного идентификатора.

2. в правиле css такой зависимости нет. Когда вы обновляете имя вашего ввода, вам также необходимо будет обновить for поле соответствующей метки. Тогда это должно сработать.

3. Глупый я. Забыл обновить for . Спасибо, теперь все работает нормально!