2

我的应用程序中共有 11 个 div。我想要做的是在 2 个永久 div 之间显示 3 个 div 它应该看起来像这样

|第一个永久 div| |div 1| |分区 2| |第 3 部分| |第二个永久 div|

|上一个| |下一个|

当我点击下一步时应该是这样的

|第一个永久 div| |分区 2| |第 3 部分| |第 4 部分| |第二个永久 div|

|上一个| |下一个|

等等。当我在 div 1,2,3 中时，前一个应该被禁用，当我在 7,8,9 时，下一个应该被禁用。

但我无法做到我正在使用这个小提琴作为示例http://jsfiddle.net/WGkPV/1/它的工作但只有一个 div 显示在我的两个永久 div 的中心，这不在我的 plan.im变成这样

|第一个永久 div| |div 1| |第二个永久 div|

|上一个| |下一个|

任何建议都会被认真对待。

这是我作为教程工作的小提琴的代码

$(document).ready(function () {
    var divs = $('.mydivs>div');
    var now = 0; // currently shown div
    divs.hide().first().show();
    $("button[name=next]").click(function (e) {
        divs.eq(now).hide();
        now = (now + 1 < divs.length) ? now + 1 : 0;
        divs.eq(now).show(); // show next
    });
    $("button[name=prev]").click(function (e) {
        divs.eq(now).hide();
        now = (now > 0) ? now - 1 : divs.length - 1;
        divs.eq(now).show(); // or .css('display','block');
        //console.log(divs.length, now);
    });
});

<div class="mydivs">
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
    <div>div 4</div>
</div>
4

1 回答 1

0

你应该像这样创建这个 div：

 <div id="container">
        <div id="parment1" class="param">Here Perment 1</div>
        <div id="mydivs" class="mydivs">
            <div id=1 >1</div>
            <div id=2 >2</div>
            <div id=3 >3</div>
            <div id=4 >4</div>
            <div id=5 >5</div>
        </div>
        <div id="parment2" class="param">Here Perment 2</div>
    </div>
<button name="prev">go to previous div</button>
<button name="next">go to next div</button>

然后你的 jquery 代码应该是这样的：

$(document).ready(function () {
    var numToShow = 3;  // this param will control how many div to show
    var divs = $('.mydivs>div');
    var now = 0; // currently shown div
    divs.hide();
    for(i = 0 ; i < numToShow ; i++)
    {
        if( i+1 >= divs.length )
        {
            break;
        }
        divs.eq(i).show();
    }

    $("button[name=next]").click(function (e) {
        divs = $('.mydivs>div');
        divs.eq(now).appendTo(".mydivs");
        divs.eq(now).hide();
        divs.eq(now+numToShow).show(); // show next
    });
    $("button[name=prev]").click(function (e) {
        divs = $('.mydivs>div');
        divs.eq(divs.length - 1).show(); // show next
        divs.eq(now+numToShow-1).hide();
        $(".mydivs").prepend(divs.eq(divs.length - 1));

        //now = (now > 0) ? now - 1 : divs.length - 1;

    });

也添加这个 css：

.mydivs {
    height:300;
    border:5px solid #ccf;
}
.mydivs>div {
    height:100%;
    overflow-y:auto;
    border:5px solid #ff0;
    padding:1em;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

.param{
    height:100%;
    overflow-y:auto;
    border:5px solid #ff0;
    padding:1em;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
}

#container{
position:relative;
}
于 2013-11-05T19:08:32.027 回答