我有一个垂直时间轴，每个步骤都按数字顺序排列。在我的数据库中，我按 Id 对它进行排序。因此，我在左侧的数据库中有奇数个 Id 元素，在我的时间轴右侧有数据库的偶数个元素。通过对我的数据库执行以下查询，我能够根据元素是偶数还是奇数 ID 使元素显示在正确的一侧:
var selectOddQueryString = "SELECT * FROM intern_firstweek WHERE (id % 2) > 0"; var selectEvenQueryString = "SELECT * FROM intern_firstweek WHERE (id % 2) = 0";
但我无法让数字顺序保持不变。 所以..它会变成 1 3 5 2 4 而不是 1 2 3 4 5。我怎样才能从数据库中提取元素并使它们保持正确的数字顺序但是给奇数一个 html/css 样式而偶数一个不同的html/css 样式。我觉得某种 if 语句可能有效，或者 javascript 或 css 解决方案可能有效。
代码如下:
@{
var db = Database.Open("HR_Portal_DB");
var selectQueryString = "SELECT * FROM intern_firstweek ORDER BY Id";
var selectOddQueryString = "SELECT * FROM intern_firstweek WHERE (id % 2) > 0";
var selectEvenQueryString = "SELECT * FROM intern_firstweek WHERE (id % 2) = 0";
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HR Intern First Week Timeline</title>
<!--Bootstrap Style Imports..minified so they load faster-->
<link rel="stylesheet" type=text/css media="screen" href="/Styles/Bootstrap/bootstrap-theme.min.css" />
<link rel="stylesheet"type=text/css media="screen" href="/Styles/Bootstrap/bootstrap.min.css" />
<!--Google Font Import-->
<link href="//fonts.googleapis.com/css?family=PT+Sans:400italic,400,700italic,700" rel="stylesheet" type="text/css" />
<!--My Sylesheet Imports-->
<link rel="stylesheet" type=text/css media="screen" href="/Styles/timeline.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1 id="timeline">Intern- First Week Process</h1>
</div>
<ul class="timeline">
@foreach(var row in db.Query(selectOddQueryString)){
<li>
<div class="timeline-badge primary">@row.Id</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">@row.Title</h4>
</div>
<div class="timeline-body">
<p>
@row.Description
</p>
<br>
<a href=@row.Link1>Intern Orientation Packet</a>
<br>
<hr>
</div>
</div>
</li>
}
@foreach(var row in db.Query(selectEvenQueryString)){
<li class="timeline-inverted">
<div class="timeline-badge success">@row.Id</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">@row.Title
</h4>
</div>
<div class="timeline-body">
<p>
@row.Description
</p>
<br>
<a href=@row.Link1>Link 1 Here</a>
<br>
</div>
</div>
</li>
}
</ul>
</div>
<h1>HR Intern First Week Timeline</h1>
<table>
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>Description</th>
<th>Link</th>
</tr>
</thead>
<tbody>
@foreach(var row in db.Query(selectQueryString)){
<tr>
<td>@row.Id</td>
<td>@row.Title</td>
<td>@row.Description</td>
<td>@row.Link1</td>
</tr>
}
</tbody>
</table>
</body>
</html>
最佳答案
使用 jQuery 奇数选择器并能够向偶数和奇数列表成员添加不同的样式，同时保持数据库中的查询按 ID 的顺序。
关于javascript - 将数据库 ID 排序为垂直时间线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27832081/