Помогите адаптировать выбор select для большого количества модальных окон на сайте?

Question

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

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

Пожалуйста, помогите найти решение этой проблемы. Спасибо.

---

Вот ссылка на проблему: https://codepen.io/chameleonestest/pen/qBdPOzY

Answer 1

Лучше не использовать один и тот же id для нескольких элементов.
Для отслеживания изменения каждого элемента, лучше использовать each.
Так же показывать элементы лучше не по классу, а в зависимости от родителя и следующего элемента.
У Вас в hmtl один элемент находится в другом. разделил их, чтобы можно было отслеживать принадлежащие элементы. Conteiner следом result
Пример:

    $('.mem').each(function () {
        $(this).change(function () {
            var child = $(this).parent().next().children(); // Берём текущий элемент, получаем его родителя, от родителя берём следующий элемент и получаем вложенные в него элементы(children)
            var f1 = child.eq(0);
            var f2 = child.eq(1);
            if($(this).val() === "64GB") {
                f1.addClass("active");
                f2.removeClass("active");
            } else if($(this).val() === "128GB") {
                f1.removeClass("active");
                f2.addClass("active");
            } else {
                f1.removeClass("active");
                f2.removeClass("active");
            }
        });
    })

    .result1, .result2 {
        display: none;
    }

    .result1.active, .result2.active {
        display:block;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <h3>Объем памяти:</h3>
    <select name="mem" id="mem" class="mem">
        <option value="">Выберете кол-во памяти</option>
        <option value="64GB">64ГБ</option>
        <option value="128GB">128ГБ</option>
    </select>
</div>

<div class="result">
    <div class="result1">
        <s class="product__oldprice ">54 999 p.</s>
        <h1 class="product_newprice">49 999 p.</h1>
    </div>
    <div class="result2">
        <s class="product__oldprice ">62 999 p.</s>
        <h1 class="product_newprice">55 999 p.</h1>
    </div>
</div>

<div class="container">
    <h3>Объем памяти:</h3>
    <select name="mem" id="mem" class="mem">
        <option value="">Выберете кол-во памяти</option>
        <option value="64GB">64ГБ</option>
        <option value="128GB">128ГБ</option>
    </select>
</div>

<div class="result">
    <div class="result1">
        <s class="product__oldprice ">54 999 p.</s>
        <h1 class="product_newprice">49 999 p.</h1>
    </div>
    <div class="result2">
        <s class="product__oldprice ">62 999 p.</s>
        <h1 class="product_newprice">55 999 p.</h1>
    </div>
</div>

БЛОГ НА HUSL

Помогите адаптировать выбор select для большого количества модальных окон на сайте?

Ответы (1 шт):