Jquery onclick 导航上一个按钮答案

【问题标题】：Jquery onclick Navigation Previous ButtonJquery onclick 导航上一个按钮
【发布时间】：2013-12-29 21:57:41
【问题描述】：

我是 Javascript 新手，并尝试在投资组合网站上实现下一个/上一个（循环）按钮。我设法使“下一个”按钮正常工作，但找不到正确的前一个按钮。我已经尝试了一切，但最终没有解决方案。

等等，在我的 HTML 部分，我有那些类，我根据菜单 + 按钮加载其他文件：

<button class="paginate pt-trigger2"><i>PREVIOUS</button>
<button class="paginate pt-trigger3"><i>NEXT</button> 

<div class="pt-page pt-page-2" id="cadrage"><div class=contiennement> </div></div>
<div class="pt-page pt-page-3" id="cadrage"><div class="contiennement"> </div></div>

在 Jquery 方面，这是我包含的脚本：

<script>

$(document).ready(function(){
var arr = ["home.php","photo.php","websites.php","identity.php","illustration.php","about.php"];

var index = 1;  

var pagess = [".pt-page-1",".pt-page-2",".pt-page-3",".pt-page-4",".pt-page-5",".pt-page-6"];

$('.pt-trigger2').click(function(){ 
 $(".pt-page").html("");
 $('.pt-page').fadeIn(500);
     $(pagess[index]).load(arr[index]); 
    index = (index-1) % arr.length ;
 });

  $('.pt-trigger3').click(function(){ 
 $(".pt-page").html("");
$('.pt-page').fadeIn(500);
    $(pagess[index]).load(arr[index]); 
    index = (index+1) % arr.length ;
 });

});
<script>

所以，一切正常，除了我在网站上的任何地方，上一个按钮加载 .pt-page-2 (photo.php) 中的内容

对不起新手，我尽力做到最好。

在此先感谢亲爱的 Cyberspace。

【问题讨论】：

你的两个.pt-page div 具有相同的 id cadrage。

标签： javascript jquery html button navigation

【解决方案1】：

我不知道这是否是您正在寻找的那种解决方案......

有一个插件可以做到这一点。 http://jquery.malsup.com/cycle2/

它遍历内容并允许您指定导航链接、过渡效果等。

【讨论】：

【解决方案2】：

请查看您的FIDDLE HERE。

$(document).ready(function () {

    var pageArray = ["home.php", "photo.php", "websites.php", "identity.php", "illustration.php", "about.php"];

    var currentPage = 0,

        loadPage = function (pageNum) {

            var pageArrayLength = pageArray.length;

            $('.pt-trigger:disabled').prop('disabled', false);

            if (pageNum <= 0) {
                pageNum = 0;
                $('.pt-trigger_prev').prop('disabled', true)
            }

            if (pageNum >= pageArrayLength - 1) {
                pageNum = pageArrayLength - 1;
                $('.pt-trigger_next').prop('disabled', true)
            }

            //Edit this part as you wish
            $('#cadrage').html('The contents of ' + pageArray[pageNum] + ' will be loaded here');


            //Until Here

            currentPage = pageNum;
        };

    $('.pt-trigger_prev').on('click', function () {
        loadPage(currentPage - 1)
    });

    $('.pt-trigger_next').on('click', function () {
        loadPage(currentPage + 1)
    });

    loadPage(currentPage)

});

【讨论】：