Return id on next "page" in next "page" in single page site based on the current page id using javascript

Question

我正在创建一个简单的网站，应该有多个页面显示不同的背景和主要文本，但具有相同的徽标和菜单。按下按钮时，下一页应从右侧滑入，从菜单中选择页面应直接过渡到该页面。我已决定将其设为单页站点以利用 CSS3 转换。下一个按钮（减去转换）的示例代码在这里：http://jsfiddle.net/xoa029jz/1/

我目前正在使用以下 javascript 确定要显示的背景和文本：

function getNextPage(pageid) {
    if (pageid == "page-1") {
        return $('#page-2');
    } else if (pageid == "page-2") {
        return $('#page-3');
    } else if (pageid == "page-3") {
        return $('#page-1');
    }
}

该站点将有 7 个页面，因此这看起来很麻烦。有没有更好的方法在 javascript 中使用顺序 ID？

该站点每个 "page" 将只有一张图片和一个句子，因此我认为没有必要使用 Ajax，但我愿意对此进行更正。

Answer 1

您可以在这种情况下使用 class，它不会为您限制任何页数，

function getNextPage(pageid) {
    if($('.current-page').next('.page-text').length){
        return $('.current-page').next('.page-text');
    }
    return $('.page-text:first');
}

function slideToNext() {
    var currentPage = $('.current-page');
    var nextPage = getNextPage(currentPage.attr('id'));
    
    $(currentPage).removeClass('current-page');
    $(nextPage).addClass('current-page');

    var currentBackground = getCurrentBackground();
    var nextBackground = getNextBackground(currentBackground);

    $('#bg').removeClass(currentBackground);
    $('#bg').addClass(nextBackground);
}

function getNextPage(pageid) {
    if($('.current-page').next('.page-text').length){
        return $('.current-page').next('.page-text');
    }
    return $('.page-text:first');
}

function getCurrentBackground() {
    var bg = $('#bg');
    if (bg.hasClass('bg-1')) {
        return "bg-1";
    } else if (bg.hasClass('bg-2')) {
        return "bg-2";
    } else if (bg.hasClass('bg-3')) {
        return "bg-3";
    }
}

function getNextBackground(bg) {
    if (bg == "bg-1") {
        return "bg-2";
    } else if (bg == "bg-2") {
        return "bg-3";
    } else if (bg == "bg-3") {
        return "bg-1";
    }
}

.page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center center;
    z-index:1;
}
.page-text {
    margin-top: 71px;
    display: none;
}
.current-page {
    display: inline;
    visibility: visible;
}
.bg-1 {
    background-color:#D8F6CE;
}
.bg-2 {
    background-color:#CEECF5;
}
.bg-3 {
    background-color:#E2A9F3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<body class="page bg-1" id="bg">
    <div id="page">
        <img id="logo" src="images/logo.png" width="295" height="92" />
        <div id="menu">
            <ul>
                <li>
                    <button>Page 1</button>
                </li>
                <li>
                    <button>Page 2</button>
                </li>
                <li>
                    <button>Page 3</button>
                </li>
            </ul>
        </div>
        <div class="page-text current-page" id="page1">Page 1 text</div>
        <div class="page-text" id="page2">Page 2 text</div>
        <div class="page-text" id="page3">Page 3 text</div>
        <button type="button" onclick="slideToNext()">Next</button>
    </div>
</body>

Answer 2

是的。获取 ID 作为数字，并递增它：

var num = +pageid[5];
if (num < 7) {
    return $('#page-'+(num+1));
}
return $('#page-1');

Answer 3

如果只有7页，我不能循环播放吗，比如：

for(var i=0;i<=7;i++){
   if (pageid == "page-"+i) {
      return $('#page-'+i);
    }
}

Answer 4

将您的代码更改为此

 //just remove the word page so that only the number will left (e.g. "page"1 )
 var nextPage = getNextPage(currentPage.attr('id').replace('page', ''));

那么你的函数会更短并且没有元素计数硬编码。

function getNextPage(pageid) {
   return $('#page' + (pageid + 1)); //just take care the logic for returning to first page
}

Return id on next "page" in next "page" in single page site based on the current page id using javascript

Return id on next "page" in single page site based on current page id using javascript

html

javascript

css

jquery