Question

当我单击页面上的任何图像时，模态应该打开，但确实如此，但是每次我单击模态或页面上的任何位置时，模态都会为每次单击而一次又一次地打开。如何阻止它执行此操作？

我正在使用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();
}));

Answer 1

我认为是因为您正在使用带有id的querySelectorAll并将相同的id分配给所有img元素。您可以尝试分配像这样的唯一ID或使用类

   <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();
}));

为什么每次我单击时都会再次实现物化模式？

1 个答案: