为什么我的物化模式每次点击都会再次打开？答案

【问题标题】：Why is my materialize modal opening again each time I click on it?为什么我的物化模式每次点击都会再次打开？
【发布时间】：2018-11-21 16:32:35
【问题描述】：

当我单击页面上的任何图像时，模态应该打开，它确实会打开，但是每次我单击模态或页面中的任何位置时，模态都会在每次单击时一次又一次地打开。我怎样才能阻止它这样做？

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

【问题讨论】：

标签： javascript modal-dialog thymeleaf materialize

【解决方案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();
}));

【讨论】：