[英]Page shows all Semantic UI modals when button clicked
當用戶單擊“查看詳細信息”按鈕時,我試圖彈出一本書的描述,並且嘗試使用語義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>
有誰知道我可以阻止這種情況發生的方法?
您的循環中的模態名稱有問題。 時間都是一樣的,所以當您在這里調用它時:
$( “ui.modal。 ”)模式(“ 秀”)。
您所有的模態都具有相同的名稱,因此所有模態只顯示自己。
給他們一個唯一的名字,然后叫這個唯一的名字。
舉個例子 :
<div class="ui modal"+<% loop.index %> style="position: relative">
你可以這樣稱呼:
$(".ui.modal.(loop.index)").modal("show");
這樣,您將只調用一種模式,僅使用類名或ID進行播放。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.