ApXNTekToP
@ApXNTekToP
Недопрограммист

Как заставить скрипт JS работать в выбранном блоке?

У меня имеется на сайте, несколько popup окон, при клике на кнопку, это окно всплывает, и человек может выбрать определенное место в ЖД поезде.
К сожалению JavaScript работает только в первом popup окне. Если производить какие либо действия в остальных popup окнах, то вся информация, о выбранном месте стоимости билетов, будет отображаться в первом popup окне.
$(".sa-scheme__berth-place").click(function() { // .sa-scheme__berth-place класс билетов которые выбирают пользователь. 
//Во всех popup окнах, он одинаковый.
    var btn = document.getElementById('btn'); // Здесь я выбираю кнопку с атрибутом id="btn". 
//В каждом popup окне, 1 кнопка с данным id
    var price = $(this).text(); //манипуляция со строкой price
    price = price.replace(/[^0-9.]/g, '');
    price = price.replace(/.(?=.{5})/g, '');
    if (!this.classList.contains('sa-scheme__berth-place_disabled')) {
       $(this).toggleClass("active");
       var text = "&nbsp;<span>" + this.innerHTML + "</span>,";
        $("#t12552").html($("#t12552").html().replace(text, ""));
        if ($(this).hasClass("active")) {
            $("#t12552").append(text);
            btn.classList.remove("wg-button_disabled"); //если какое либо место выбранно, удаляем из кнопки класс, а так же //атрибут disable
            btn.removeAttribute('disabled');
            var value = $("#t12552").children().length * price; //высчитывание цены билетов.
            document.getElementById("value").innerHTML = value; //обновление значения переменной value
        } else {
            value = $("#t12552").children().length * price;
            document.getElementById("value").innerHTML = value; //обновление значения переменной value
        }
    }
    if ($(".sa-scheme__berth-place.active").length) {
        $(".double-dots").show(); 
        $("#value").show();
    } else {
        $(".double-dots").hide();
        $("#value").hide();
        btn.classList.add("wg-button_disabled");
        btn.addAttribute("disabled");
    }
});

Покажу как скрипт работает на практике:
Человек открывает popup Плацкарт, выбирает любое свободное место, и появляется кнопка с id btn, а так же высчитывается общая цена выбранных билетов, и сколько мест выбрал человек.
5fa29192dfa9d692331355.png
Если человек подобное провернуть в popup "купе"
5fa292c80b6e5900773343.png
вся информация появится в первом popup окне!!
5fa292e50b10f235309854.png
Как это фиксить, вообще в голову не приходит, пытался использовать циклы, скрипт не работает.
Прошу объяснить, как это должно работать, ну и какие функции помогут мне с фиксом данной проблемы.
Если у вас возникнут вопросы, по коду, прошу задавайте, постараюсь ответить.
  • Вопрос задан
  • 81 просмотр
Решения вопроса 1
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
Не разбирал ваш код досконально, но скорее всего проблема в том, как вы выполняете поиск элементов по селектору. Предполагаю, что вы выполняете поиск глобально, что и приводит к проблемам.
Обычно, даже для оптимизации, я ограничиваю поиск не по всему документу, а по какому-то контейнеру.
const modal1 =  document.querySelector('#modal-1')
const modal2 =  document.querySelector('#modal-2')

modal1.querySelector('button.send') // кнопка в первой модалке
modal1.querySelector('.status').textContent = '...' // статус в первой модалке

modal2.querySelector('button.send') // кнопка во второй модалке
modal2.querySelector('.status').textContent = '...' // статус во второй модалке
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
04 дек. 2020, в 16:45
50000 руб./за проект
04 дек. 2020, в 16:41
1 руб./за проект
04 дек. 2020, в 16:29
80000 руб./за проект