Почему мое материализованное модальное открытие снова каждый раз, когда я нажимаю на него? - PullRequest
Новая
       28

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

0 голосов
/ 21 ноября 2018

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

Я использую ThymeLeaf и библиотеку материализации для построения модального стиля.

HTML: 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="icon" th:href="@{/favicon_heladeria.png}" />

    <link rel="stylesheet" th:href="@{/vendor/materialize/css/materialize.css}" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" th:href="@{/app.css}" />

    <title>Copito de Nieve | Home</title>
</head>
<body>
    <div class="navbar-fixed">
        <nav>
            <div class="container">
                <a th:href="@{/}" class="brand-logo">Heladeria</a>
                <a href="#" data-activates="mobile-nav" class="button-collapse right"><i class="material-icons">menu</i></a>
                <ul class="right hide-on-med-and-down">
                    <li class="active"><a th:href="@{/}">Home</a></li>
                    <li><a th:href="@{/gustos}">Gustos</a></li>
                    <li><a th:href="@{/ingresar}">Ingresar</a></li>
                </ul>
                <ul id="mobile-nav" class="side-nav">
                    <li class="active"><a th:href="@{/}">Home</a></li>
                    <li><a th:href="@{/gustos}">Gustos</a></li>
                    <li><a th:href="@{/ingresar}">Ingresar</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="search-bar container">
        <div class="row">
            <div class="col s12">
                <form action="#" method="get">
                    <div class="input-field">
                        <input name="q" type="search" placeholder="Buscar todos los helados..." required="required" autocomplete="off"/>
                        <i class="material-icons">search</i>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div>
        <h2 class="mid-title">Productos</h2>
    </div>
    <div class="helados container">
        <div class="row">
            <div th:each="producto : ${productos}" class="col s12 l4">
                <img id="prod-img" th:src="@{'/images/' + ${producto.nombre} +'.png'}" />
                <p class="product-name" th:text="${producto.nombre}"></p>
                <p class="desc" th:text="${producto.descripcion}"></p>
            </div>
        </div>
    </div>
    <!-- Modales -->
    <div id="prodModal" class="modal">
        <div>
            <div class="modal-content">
                <h4 class="modal-title">Haga su pedido</h4>
                <p class="flavour" th:each="gusto : ${gustos}" th:text="${gusto.nombre}"></p>
            </div>
        </div>
    </div>

<script th:src="@{/vendor/jquery/jquery-1.11.3.js}"></script>
<script th:src="@{/vendor/materialize/js/materialize.js}"></script>
<script th:src="@{/home.js}"></script>
</body>
</html>

JS: 

 document.querySelectorAll('#prod-img').each(addEventListener('click', () => {
  var element = document.querySelector('#prodModal');
    var modal = M.Modal.init(element, {});
    modal.open();
}));

enter image description here

1 Ответ

0 голосов
/ 21 ноября 2018

Я думаю, это потому, что вы используете querySelectorAll с идентификатором и назначаете один и тот же идентификатор всем элементам img.Вы можете попытаться присвоить уникальный идентификатор, подобный этому, или использовать класс 

   <div th:each="producto : ${productos}" class="col s12 l4">
            <img id="prod-img-${producto.nombre}" th:src="@{'/images/' + ${producto.nombre} +'.png'}" />
            <p class="product-name" th:text="${producto.nombre}"></p>
            <p class="desc" th:text="${producto.descripcion}"></p>
   </div>

. И в js используйте querySelectorAll с '^ =', чтобы проверить, начинается ли значение с 'prod-img' 

document.querySelectorAll('[id^="prod-img"]').each(addEventListener('click', 
() => {
 var element = document.querySelector('#prodModal');
 var modal = M.Modal.init(element, {});
 modal.open();
}));
...