作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在用户单击“查看详细信息”按钮时弹出一本书的描述,并且我正在尝试使用语义 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").modal("show");
你所有的模态都有相同的名字,所以所有的模态都只显示它们自己。
给他们一个唯一的名字,并调用这个唯一的名字。
例如:
<div class="ui modal"+<% loop.index %> style="position: relative">
你可以这样调用它:
$(".ui.modal.(loop.index)").modal("show");
在这种情况下,您将只调用您的模式之一,只需使用类名或 ID。
关于javascript - 单击按钮时页面显示所有语义 UI 模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45766077/
我来自 Asp.Net 世界,试图理解 Angular State 的含义。 什么是 Angular 状态?它类似于Asp.Net中的ascx组件吗?是子页面吗?它类似于工作流程状态吗? 我听到很多人
我一直在寻找 3 态拨动开关,但运气不佳。 基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始,一旦用户向左或向右滑动,就无法回到N/A(未回答)状态。 有人
我是一名优秀的程序员,十分优秀!