单击按钮时页面显示所有语义 UI 模式答案

【问题标题】：Page shows all Semantic UI modals when button clicked单击按钮时页面显示所有语义 UI 模式
【发布时间】：2017-08-18 23:03:55
【问题描述】：

当用户单击“查看详细信息”按钮时，我试图弹出一个书籍描述的弹出窗口，并且我正在尝试使用语义 ui 模式来完成该操作。因为我有几本书要渲染，所以我使用 ejs 循环一次循环遍历所有数据，但是每次单击按钮时，都会显示所有模式，而不仅仅是一本书的描述。

这是我的 ejs 代码

<% include header.ejs %>
<% include nav.ejs %>
<div class="page-hero" style="background-image: url('a.jpg'); width: 100%;">
<h1 id="eachTitle">ADD BOOK</h1>
</div>
<div class="ui container">
<form method="POST">
    <input type="text" name="search" placeholder="Search..." required class="searchBook">
    <input type="submit" class="ui button basic blue"value="Search">
</form>
<iframe name="target" style="display: none;"></iframe>
<% for(var i = 0; i < results.length; i++){ %>
    <div class="ui grid">
        <div class="column four wide">
            <form method="POST" action="">
            <div class="ui card">
                <div class="image">
                    <input value="<%= results[i].thumbnail %>" name="image" style="display: none">
                    <img src = "<%= results[i].thumbnail %>"/>
                </div>
                <div class="content">
                    <div class="header">
                        <input class="ui small header title" value="<%= results[i].title %>" readonly name="title">
                    </div>
                    <div class="meta">
                        <div class="des">Author:<input class="desc" value="<%= results[i].authors %>" readonly name="author"></div><br>
                        <div class="des">Published on:<input class="desc" value="<%= results[i].publishedDate %>" readonly name="date"></div><br>
                        <div class="des">Pages:<input class="desc" value="<%= results[i].pageCount %>" readonly name="pages"></div><br>
                        <div class="des">Rating:<input class="desc" value="<%= results[i].averageRating %>" readonly name="rating" style="display: none">
                            <div class="star-ratings-css">
                                <div class="star-ratings-css-top" style="width: <%= results[i].averageRating * 26.5 + "%" %>"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
                                <div class="star-ratings-css-bottom"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
                            </div>
                        </div><br>
                    </div>
                </div>
                <div id="modaldiv" class="ui modal" style="position: relative">
                        <i class="close icon"></i>
                        <div class="header"><%=results[i].title%></div>
                        <div class="content">
                            <input value="<%= results[i].description%>" readonly style="display: none" name=description>
                            <%= results[i].description%>
                        </div>
                    </div><!-- Should be out side of the book info div -->
                <div class="content extra">
                    <a class="ui button basic fluid detail">View Detail</a>
                    <button class="add ui button basic fluid" type="submit" name="button" id="<%= results[i].title %>">Add</button>
                </div>
            </div>
        </div>
    </div> 
</form>
<% } %>
</div>
<% include footer.ejs%>
<script type="text/javascript">
  $(document).ready(function(){
      $(document).on('click', ".detail", function(){
          $(".ui.modal").modal("show");
      })
  })
</script>
</body>
</html>

有谁知道我可以阻止这种情况发生的方法吗？

【问题讨论】：

好吧，你已经点击了文档。首先应该显示哪个模式？

标签： javascript jquery loops ejs semantic-ui

【解决方案1】：

您的循环中模式的名称有问题。时间都是一样的，所以当你在这里调用它时：

$(".ui.modal").modal("show");

您所有的模态都具有相同的名称，所以所有的模态都只是显示自己。

给他们一个唯一的名字，然后叫这个唯一的名字。

例如：

<div class="ui modal"+<% loop.index %> style="position: relative">

你可以这样称呼它：

$(".ui.modal.(loop.index)").modal("show");

这样，您将只调用一个模态，只需使用类名或 id。

【讨论】：