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？

该网站每个“页面”只有一个图像和一个句子，所以我认为没有必要使用Ajax，但我愿意对此进行纠正。

Answer 1

在这种情况下，您可以使用类，它不会限制您使用任意数量的页面，

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

＆＃13;

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";
    }
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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
}

使用javascript根据当前页面ID在单页网站中的下一个“页面”上返回ID

4 个答案: