Добавлять активный класс к элементу карусели, когда выбрана опция формы - PullRequest
Новая
       14

Добавлять активный класс к элементу карусели, когда выбрана опция формы

0 голосов
/ 12 июня 2019

Я создаю конфигуратор для друга и мне нужна помощь для самого последнего шага: когда я выбираю опцию в моей форме, класс «активный» должен быть помещен в определенный элемент карусели.

Необходимо использовать выбор форм, для этого нет другого выбора.

Вот ссылка на небольшую страницу: https://abaci2.hirschgeweyh.de/

Это рубашка, где вы можетепереключиться на варианты.Сначала мне нужно «manschetten», поэтому я могу позже скопировать JavaScript / HTML.

Я уже пробовал addclass / removeclass, но это не помогло, даже запрос на изменение не смог справиться с этим.Похоже, что нет решения сообщить странице, какой вариант был выбран в данный момент для помещения в класс.

Вот типичный выбор: 

<tr class="auswahl0205" id="auswahl0205">
    <td><strong>Manschetten</strong></td>
    <td><select name="manschetten">
  <option class="manschette1" data-class="manschette1" value="manschette1">Einzelmanschette</option>
  <option class="manschette2" data-class="manschette2" value="manschette2">Doppelmanschette</option>
</select></td>
</tr>

А вот и карусельслайдер, в котором мне нужен активный класс: 

<div id="slider04" class="manschetten carousel carousel1 slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item mansch mansch1 active"><img src="assets/img/manschetten/manschette1.png" class="d-block w-100" alt="img1"></div>
<div class="carousel-item mansch mansch2"><img src="assets/img/manschetten/manschette2.png" class="d-block w-100" alt="img2"></div>
</div>
</div>

Я не могу найти правильного решения.

1 Ответ

0 голосов
/ 14 июня 2019

Хорошо, я понял, что элемент select может получить «активный» класс и в теории использоваться как индикатор карусели. Но это не работает по неизвестным причинам (возможно, потому что я действительно не нажимаю на новый индикатор, а вместо этого «переключаю» метку). Короче говоря: это не сработает - может быть, кто-то еще найдет решение.

Итак, что я сделал, было довольно просто: вместо использования опций выбора я использовал ul li и заставил их перемещаться по изображениям с помощью загрузочной карусели: 

        <td>
        <ul class="">
            <li data-target="#slider04" data-slide-to="0" class="active">Einzelmanschette</li>
            <li data-target="#slider04" data-slide-to="1">Doppelmanschette</li>
        </ul>
        </td>

Это сработало как шарм!

И чтобы это выглядело как выделение, я использовал только CSS. Готово! Дело закрыто!

...