javascript - 无法弄清楚使 Prev/Next 按钮工作所必需的 javascript

Question

我一直在这个网站上阅读一些关于如何进行上一个/下一个导航的文章，但我似乎找不到一篇可以很好地使用我的代码设置方式的文章。有很多东西要吸收，如果您想查看实时站点以供引用，请单击 here .

HTML

<div id="arrow-nav" class="container-full clearfix">
   <div class="container">
      <a class="prev sm-title" href="#"><i class="fa fa-long-arrow-left"></i> Previous Project<span>Project Title</span></a>
      <a class="next sm-title" href="#"><span>Project Title</span>Next Story <i class="fa fa-long-arrow-right"></i></a>
   </div>
</div><!--end arrow nav-->

<div id="portfolio">
   <div class="portfolio-container group">

   <div class="articles">
      <article class="mix web col-6" data-myorder="1">
         <div class="holder">
            <a href="" data-type="projectLoader" data-project="project-1" id="project_1"><span class="image_holder grow" style="background-image:url('images/file-thumb.jpg')"></span></a>
            <p class="description" data-type="projectLoader" data-project="project-1"><span>Project Name</span><br>Check out this project!</p>
         </div>
      </article>

      <article class="mix web col-6" data-myorder="2">
         <div class="holder">
            <a href="" data-type="projectLoader" data-project="project-2" id="project_2"><span class="image_holder grow" style="background-image:url('images/file-thumb.jpg')"></span></a>
            <p class="description" data-type="projectLoader" data-project="project-2"><span>Project Name</span><br>Check out this project!</p>
         </div>
      </article>
   </div>
   </div>
</div>

Javascript这就是我为每个元素创建内容的方式:

var projects = {
        'project-1' : {
            'title' : 'Project Name',
            'description' : 'Lorem Ipsum',
            'images': [
                '/images/path/file-1.jpg'
            ],
            'tags': [
                'Lorem Ipsum 1',
                'Lorem Ipsum 2'
            ]
        },
        'project-2' : {
            'title' : 'Project Name',
            'description' : 'Lorem Ipsum',
            'images': [
                '/images/path/file-1.jpg'
            ],
            'tags': [
                'Lorem Ipsum 1',
                'Lorem Ipsum 2'
            ]
        }
}

这是我如何提取数据并将其输出到 div 中的示例:

$('#project-title').html(projectData.title);
$('#project-description').html(projectData.description);

我就是这样得到 #arrow-nav 的出现:

$('[data-type="projectLoader"]').click(function() {
        var proj = $(this)[0].getAttribute('data-project');
        $('#arrow-nav').addClass('slideIn');

        updateHash(proj);
        return false;
});

$('[data-type="projectDie"]').click(function() {
        $('body').removeClass('projectLoaded');
        $('#arrow-nav').removeClass('slideIn');
        return false;
});

$( 'document' ).ready(function() {
        if ($('body').hasClass('projectLoaded')) {
            $('#arrow-nav').addClass('slideIn');
        } else {
            $('#arrow-nav').removeClass('slideIn');
        }
});

要接受的代码很多。基本上我想要实现的是，当我将鼠标悬停在 Previous 或 Next 上时，我有一个 <span>我想保留上一个或下一个元素名称。 Prev/Next 要么采用 data-myorder="x";或从 var projects 获取上一个/下一个元素.

点击元素时的交互，这是让它向上滑动的css:

#project {
    position:fixed;
    left:0;
    width:100%;
    height:100%;

    opacity:0;
    top:100%;
    background: #efefed;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;

    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}
body.projectLoaded {
    overflow: hidden;
}
body.projectLoaded #project {
    opacity:1;
    top:0;
}

如果当我点击 Previous 按钮时它从左边开始:100%;向左:0，反之亦然，但如果它必须保持不变，我可以接受。我尝试查看一些示例，看看它是否足够简单，可以交换一些东西，我尝试了一些代码示例，但我不知道我在做什么，所以我懒得在这里发布任何代码，已经有很多了。要直观了解我要实现的目标，请单击 here然后点击一个元素。

Answer 1

如果你只想让东西从左向右滑动，这取决于你前进的方向，你需要三个独立的状态:左/右/事件

您可以创建一个 div 来保存您的下一个/上一个状态，这样您就可以在事件状态滑开时将它们滑入。

在任何幻灯片之前，您更新来自幻灯片的信息。

您知道哪个元素处于事件状态，因此您知道从那里去哪里。

我会将您的 JS 对象更改为:

var projects = [
    {
            'id': 1,
        'title' : 'Project Name',
        'description' : 'Lorem Ipsum',
        'images': [
            '/images/path/file-1.jpg'
        ],
        'tags': [
            'Lorem Ipsum 1',
            'Lorem Ipsum 2'
        ]
    },
    {
            'id': 2,
        'title' : 'Project Name',
        'description' : 'Lorem Ipsum',
        'images': [
            '/images/path/file-1.jpg'
        ],
        'tags': [
            'Lorem Ipsum 1',
            'Lorem Ipsum 2'
        ]
    }
 ];

 console.log(projects[0].tags); // ["Lorem Ipsum 1", "Lorem Ipsum 2"]

现在您可以使用数组的索引或 ID。

这里的动画是 Fiddle

编辑: This Fiddle更好地说明了我的观点