ボタンがクリックされたときにセマンティックUIモーダルがページに表示される

Question

ユーザーが「詳細を表示」ボタンをクリックしたときに書籍の説明をポップアップ表示しようとしていますが、セマンティックUIモーダルを使用してこれを達成しようとしています。私はいくつかの書籍をレンダリングするので、すべてのデータを一度にループするためにejsループを使用していますが、ボタンをクリックするたびに1つのブックの説明ではなく、すべてのモーダルが表示されます。ここで

は私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> 

で誰もが私が起きてからこれを停止することができます方法を知っていますか？

Answer 1

ループ内のモーダルの名前に問題があります。あなたがそれをここに呼び出すときはいつも同じです：

$（ "。ui.modal"）。modal（ "show"）;

すべてのモーダルは同じ名前なので、すべてのモーダルが表示されます。

一意の名前を付けて、一意の名前を呼び出します。

exempleの場合

：

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

そして、あなたはそれを呼び出すことができます。この方法では

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

、あなただけのクラス名またはIDと遊ぶ、あなたのモーダルの一つだけを呼び出します。