Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.11.2020, 05:50
Новичок на форуме
Отправить личное сообщение для Don_Conteo Посмотреть профиль Найти все сообщения от Don_Conteo
 
Регистрация: 13.11.2020
Сообщений: 3

отправить данные из div, в котором нажата кнопка
Прошу помощи знатоков. Есть несколько div с одинаковыми кнопками (значения для полей в дивах берутся из базы с помощью ТЛ) и модальное окно (одно для всех кнопок). Необходимо при нажатии на любую из этих кнопок открыть модальное окно и его в скрытый input (calor) добавить значение (количество ккал elem.calories) именно из того div, в котором была нажата кнопка.

кусок HTML (здесь привел три блока для примера, на самом деле их, конечно же, в разы больше):

<div class="foodN">
                        <img th:src="@{__${#httpServletRequest.scheme + '://' + #httpServletRequest.serverName + ':' + #httpServletRequest.serverPort}__/images/peanut.jpg}">
                        <p th:each="elem : ${food[0]}" th:text="${elem.name}"></p>
                        <a>Ккал на 100 грамм:</a>
                        <strong><a th:each="elem : ${food[0]}" th:text="${elem.calories}"></a></strong>
                        <input type="button" id="0" value="+" class="add">
                    </div>

                    <div class="foodN">
                        <img th:src="@{__${#httpServletRequest.scheme + '://' + #httpServletRequest.serverName + ':' + #httpServletRequest.serverPort}__/images/brasilNut.jpg}">
                        <p th:each="elem : ${food[1]}" th:text="${elem.name}"></p>
                        <a>Ккал на 100 грамм:</a>
                        <strong><a th:each="elem : ${food[1]}" th:text="${elem.calories}"></a></strong>
                        <input type="button" value="+" class="add">
                    </div>

                    <div class="foodN">
                        <img th:src="@{__${#httpServletRequest.scheme + '://' + #httpServletRequest.serverName + ':' + #httpServletRequest.serverPort}__/images/mindal.jpg}">
                        <p th:each="elem : ${food[2]}" th:text="${elem.name}"></p>
                        <a>Ккал на 100 грамм:</a>
                        <strong><a th:each="elem : ${food[2]}" th:text="${elem.calories}"></a></strong>
                        <input type="button" value="+" class="add">
                    </div>


модальное окно

<div class="overlay" id="modal-background">
        <div class="flex-popup" id = flex>
            <div class="popup" id="popup">
                <input type="hidden" name="calor" id="calor">
                <input class="input" placeholder="Введите количество в граммах" id="quantity" type="text" width="50px" background-color="white">
                <button id="addToRes" class="addBtn" title="Добавить">Добавить</button>
                <button id="butClose" class="closeBtn" title="Отмена">Закрыть</button>
            </div>
        </div>
    </div>


JS

<script>
        $(function() {
            $(".add").click(function () {
                document.getElementById("modal-background").style.display = "block";
                });

            $("#butClose").click(function () {
                document.getElementById("modal-background").style.display = "none";
                });

            $(document).mouseup(function (e){
                var modalctr = $("#modal-background");
                var modal = $(".popup");
                if (!modal.is(e.target) && modal.has(e.target).length === 0){
                modalctr.hide();
                }
            });
        });

        let nuts = document.getElementById('nutsPage'),
            mushrooms = document.getElementById('mushroomsPage')

        nuts.addEventListener( 'click', function( e ) {
            document.getElementById("foodMushrooms").style.display = "none";
            document.getElementById("foodNuts").style.display = "block";
        });

        mushrooms.addEventListener( 'click', function( e ) {
            document.getElementById("foodNuts").style.display = "none";
            document.getElementById("foodMushrooms").style.display = "block";
        });
    </script>
Ответить с цитированием
  #2 (permalink)  
Старый 13.11.2020, 07:06
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 871

$(".add").click(function () {
      document.getElementById("modal-background").style.display = "block";
     let block = this.closest('.foodN')  // блок в котором щелкнули
     ....
});
Ответить с цитированием
  #3 (permalink)  
Старый 14.11.2020, 00:01
Новичок на форуме
Отправить личное сообщение для Don_Conteo Посмотреть профиль Найти все сообщения от Don_Conteo
 
Регистрация: 13.11.2020
Сообщений: 3

Спасибо большое, но я все равно пока не понимаю, каким именно образом мне из этого конкретного div'а выдернуть значение из <а>, которое берется там из базы.

Последний раз редактировалось Don_Conteo, 14.11.2020 в 00:31.
Ответить с цитированием
  #4 (permalink)  
Старый 14.11.2020, 15:26
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 871

У <a> нет значения. Есть текст ссылки. Есть атрибут href. Что вам надо?
получить <a> из вашего <div>
let a = block.querySelector('a')
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как удалить именно тот див, в котором находиться сама кнопка удаления? Wahtel Элементы интерфейса 1 21.11.2014 13:39
Ввод в полускрытый input смещает div, в котором он находится Scepticus Элементы интерфейса 4 29.05.2013 16:50
Элемент, в котором была нажата клавиша Australl Элементы интерфейса 23 09.02.2011 23:11
как обратиться к div в котором стоит болк <script> Casufi Events/DOM/Window 3 22.09.2010 14:47
div - затемнялка под div- кнопка, как сделать? webmonster2008 Общие вопросы Javascript 2 30.07.2010 17:09