1

我正在制作一个作品集，您首先会看到每个项目的缩略图。单击缩略图时，将加载并显示内容。

现在，对于这个内容加载，我决定跳过 ajax 并将所有需要的信息放入一个 javascript 变量中，以便在获取内容时我只需使用 jquery 创建一个容器并用变量中提供的信息填充它，然后显示给访问者. 到目前为止，一切都很好。

我希望能够工作的是，当访问者加载一个项目时，它应该同时在屏幕外创建具有相邻项目的容器。例如，如果访问者点击项目编号 3，它应该加载项目 1 和 2（位于屏幕左侧）以及项目 4 和 5（位于屏幕右侧）。当访问者完成查看工作时，他或她应该能够单击上一个或下一个，并且该特定项目将在屏幕上滑动。

一段时间以来，我一直在研究如何构建它以使其最有效，但我似乎无法弄清楚如何去做。最困扰我的是如何弄清楚如果访问者直接进入项目 1 并决定点击上一个，如何为最后一个项目提供服务？

项目：
1 2 3 4 5 6 7 8 9 10

粗体代表点击的项目，斜体代表应该加载哪些项目。正如您所理解的，例如，如果在这种情况下单击下一步，则 2 将变为活动状态，并且应该加载/创建项目 4。

创建容器后，它看起来像这样：

<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”等表示项目的显示顺序。此外，我将项目总数放在一个单独的变量中。但除此之外，如何以最有效的方式来解决这个问题现在已经超出了我的想象。

想法？

4

2 回答 2

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]}
于 2013-06-29T14:40:14.680 回答
0

一个标志来确保项目已加载然后加载当前项目的上一个和下一个项目呢？这样，您在第一个项目上单击 prev 就没有问题，因为将加载最后一个项目。将此应用于zaquest答案，那么我认为您会没事的。

于 2013-07-06T03:30:41.140 回答