Question

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

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

|先前| |下一|

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

|第一个永久div | | div 2 | | div 3 | | div 4 | |第二永久div |

|先前| |下一|

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

但我不能让它使用这个小提琴作为样本http://jsfiddle.net/WGkPV/1/它的工作但只有一个div显示在我的两个永久div的中心，这不在我的计划中。我得到这样的< / p>

|先前| |下一|

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

这里是作为教程

工作的小提琴的代码

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

Answer 1

你应该像这样创建这个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;
}

div jquery mobile中的下一个上一个按钮

1 个答案: