2

インターフェイスの上部を見ると、7 つのアイコンがあります。各アイコンには、対応するラベル ( を使用<li>) があります。「次へ」ボタンをクリックすると、次のラベル<li>を表示し、前のラベルを非表示にします。<li>最後に到達するとループするように、これを周期的に行う必要があります。

戻るボタンには明らかにこれの逆が必要です。これまでの私のコード:

$('#next2').click(function() {
    var nextItem = $('#labels li.select').hide().next('#labels li');
    if (nextItem.length === 0) {
        nextItem = $('#labels li').first();
    }

    nextItem.fadeIn().addClass('select');
    $('#labels li.select').prev().hide();
});

$('#prev2').click(function() {
    var prevItem = $('#labels li.select').hide().prev('#labels li');
    if (prevItem.length === 0) {
        prevItem = $('#labels li').last();
    }

    prevItem.fadeIn().addClass('select');
    $('#labels li.select').next().hide();
});

HTML

<div style="margin-left:8%; margin-bottom:10px;">
    <ul id="labels">
        <li id="label-discover" class="select">Discover </li>
        <li id="label-collaborate">Collaborate </li>
        <li id="label-create">Create </li>
        <li id="label-develop">Develop </li>
        <li id="label-launch">Launch </li>
        <li id="label-maintain">Maintain </li>
        <li id="label-learn">Learn </li>
    </ul>
</div>

CSS

#labels li {
    font-family: 'ArvoBold';
    line-height: 100%;
    font-size: 100%;
    color:#FFF;
    margin-bottom:7px;
    text-align:left;
    display:inline;
    display:none;
    text-transform:capitalize;
}

#labels li.deselect {
    display:none;
}

#labels li.select {
    display:inline;
}
4

2 に答える 2

1

それがあなたが求めているものかどうかはわかりませんが、私はこれをすばやく作成しました：

プレビュー：JSFiddle

$(document).ready(function() {
    var total= $('#labels').children().length - 1;
    var current = 0;

    $('#prev').click(function(e) {
        /* Stop page refreshing on anchor click */
        e.preventDefault();

        $('#labels').children().eq(current).hide();

        if(current === 0)
            current = total;
        else
            current--;

        $('#labels').children().eq(current).show();

    });

    $('#next').click(function(e) {
        /* Stop page refreshing on anchor click */
        e.preventDefault();

        $('#labels').children().eq(current).hide();

        if(current === total)
            current = 0;
        else
            current++;

        $('#labels').children().eq(current).show();

    });
});​​
于 2012-11-13T13:52:19.900 に答える
0

jsBin デモ

最初に「0」に設定されたカウンターを洞窟に入れ、ページ番号がわかっている場合:

var pagesN = 7 // or use: $('childrensOfSomeElement').length;
var c = 0;


 $('#prev, #next').click(function(){
    
    // logic //
    var myID = this.id=='next' ? c++ : c--;  
    c= c===-1? pagesN-1 : c%pagesN ;  
   
    console.log( c );

 });

クリック後、メソッドを使用して必要な子要素をターゲットにできます.eq()

于 2012-11-13T14:26:00.300 に答える