我正在开发一个投资组合,您首先会看到每个项目的缩略图。单击缩略图时,将加载并显示内容。
现在,对于这个内容加载,我决定跳过ajax并将所需的所有信息放入javascript变量中,以便在获取内容时,我只需使用jquery创建一个容器,并用变量中提供的信息填充它,然后显示对访客。到目前为止一切都很好。
我希望能够工作的是,当访问者加载项目时,它应该同时在屏幕上创建与相邻项目相关的容器。例如,如果访问者点击了项目编号3,它应该加载项目1和2(位于屏幕左侧)以及项目4和5(位于屏幕右侧)。当访问者完成工作后,他或她应该能够单击上一个或下一个,并且该特定项目将在屏幕上滑动。
我一直在研究如何在一段时间内将其结构化为最有效率,而我似乎无法弄清楚如何做到这一点。最让我感到困惑的是如何确定如果访问者直接进入项目1并决定点击上一个项目,如何为最后一个项目提供服务?
项目:
1 2 3 4 5 6 7 8 9 10
粗体代表点击的项目,斜体代表哪些应该加载它们。正如您所理解的那样,例如,如果在此场景中单击了next,则2将变为活动状态,并且应该加载/创建alas项目。
创建容器时,它看起来像这样:
<div id="projects">
<article class="curr" data-order="1" id="project1">
Content
</article>
</div>
我们的想法是在课程.prev
/ .next
之前添加/追加新项目#projects
我从中获取数据的变量如下所示:
var works = {
"work":{
"1":{"id":101,"name":"project-1","title":"Project 1","content":"Text"},
"2":{"id":201,"name":"project-2","title":"Project 2","content":"Text"},
"3":{"id":301,"name":"project-3","title":"Project 3","content":"Text"},
"4":{"id":401,"name":"project-4","title":"Project 4","content":"Text"},
"5":{"id":501,"name":"project-5","title":"Project 5","content":"Text"},
"6":{"id":601,"name":"project-6","title":"Project 6","content":"Text"},
"7":{"id":701,"name":"project-7","title":"Project 7","content":"Text"},
"8":{"id":801,"name":"project-8","title":"Project 8","content":"Text"},
"9":{"id":901,"name":"project-9","title":"Project 9","content":"Text"},
"10":{"id":1001,"name":"project-10","title":"Project 10","content":"Text"},
}
}
“1”,“2”等表示项目的显示顺序。 除此之外,我在一个单独的变量中有项目总数。但除此之外,如何以最有效的方式处理这个问题现在已经超出了我的想法。
思想?
答案 0 :(得分:1)
如果您的问题是在用户打开项目project_idx
时找出应加载哪些项目,那么您可以试试这个
function next(idx) {
return (idx + 1) % project_count;
}
function prev(idx) {
return (idx + (project_count - 1)) % project_count;
}
function adjacent(project_idx) {
return {
"prev": [prev(prev(project_idx)), prev(project_idx)],
"next": [next(project_idx), next(next(project_idx))]
};
}
// assuming project_count = 10 and projects are indexed starting 0
adjacent(0); // -> {prev:[8,9], next:[1,2]}
adjacent(9); // -> {prev:[7,8], next:[0,1]}
adjacent(4); // -> {prev:[2,3], next:[5,6]}
答案 1 :(得分:0)
确保项目已加载然后加载当前项目的prev和next项目的标志怎么样?这样你在第一个项目上单击prev就没有问题,因为最后一个项目将被加载。将此应用于zaquest答案,我认为你会好的。