2

私のアプリには合計11のdivがあります。私がやりたいのは、2つの永続的なdivの間に3つのdivを表示することです。これは次のようになります

|最初のパーマネント div| |区分 1| |区分 2| |区分 3| |2 番目のパーマネント div|

|前へ| |次|

次をクリックすると、次のようになります

|最初のパーマネント div| |区分 2| |区分 3| |区分 4| |2 番目のパーマネント div|

|前へ| |次|

等々。im が div 1,2,3 の場合は前のものを無効にし、im が 7,8,9 の場合は next を無効にする必要があります。

しかし、私はこのフィドルをサンプルとして使用しています。こうなって

|最初のパーマネント div| |区分 1| |2 番目のパーマネント 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 に答える