次の/前のリンクのある12番目のli要素にスクロールします。

Question

私はこのことを機能させるよう努めてきました。私はどこでそれで迷子になっているのか分かりません。

私は一度に12個ずつ表示されるサムネイル画像の束を出力しています。

私はほとんどそれが働いていますが、それはまだ本当にバギーです。もし誰かがそれが素晴らしいだろうと助けることができれば。次のリンクがクリックされた後のprevリンクを表示し、インデックスが0より小さい場合は非表示にし、インデックスがliコレクションの長さより長い場合は次のリンクを非表示または表示します。

リンクをクリックするたびに、プラスまたはマイナス12を増やす必要があるため、scrollToの次のインデックスが設定されます。

ここに私が作成したデモです：http://jsfiddle.net/jaredwilli/L9hns/

var t = { 
    num: 12, 
    scroll: {to: {}, from: {}}, 
    init: function() { 
     var li = $('.barthumbs li'), 
      first = li.eq(0), 
      index = $('li.active').index(); 

     console.log(index); 

     $('#next').click(function(e) { 
      t.scroll.to = t.link(index, '+'); 
      index += t.num; 

      $('#bartender-thumbs').scrollTo($('#'+t.scroll.to), 500); 

      //console.log(index); 
      e.preventDefault(); 
     }); 

     $('#prev').click(function(e) { 
      t.scroll.from = t.link(index, '-'); 
      index -= t.num; 
      //console.log(t.scroll.from); 
      //console.log(index); 
      $('#bartender-thumbs').scrollTo($('#'+t.scroll.from), 500); 
      e.preventDefault(); 

     }); 
     //console.log(index); 
    }, 
    link: function(index, operator) { 
     if (operator == '+') { 
      index = index + t.num; 
     } else if (operator == '-') { 
      index = index - t.num; 
     } 
     console.log(index); 
     var curr = $('li').eq(index); 

     $('li').removeClass('active'); 
     curr.addClass('active'); 
     curr = $('.active').attr('id'); 
     //console.log(curr); 

     if (index > 0) { $('#prev').show(); } 
     if (curr == undefined) { $('#next').hide(); } 

     return curr; 
    } 
}; 
t.init(); 

Answer 1

init: function() { 
    var li = $('.barthumbs li'), 
     total = li.length, 
... 
     t.scroll.to = t.link(index, total, '+'); 
... 
     t.scroll.from = t.link(index, total, '-'); 
... 
    if (index+12>total) { $('#next').hide(); } 
    else { $('#next').show(); } 

    if (index === 0) { $('#prev').hide(); } 
    else { $('#prev').show(); } 

これはあなたのコードは、論理的に、正しいことを行うようになります。しかし、＃（ '＃prev'）があっても#prevを消すようなコードのどこかにバグがあります。リンク関数でshow（）が呼び出されます。

Answer 2

私はここに私の作業コードとフィドルだ

@マイクあなたの助けのおかげでそれを考え出し：http://jsfiddle.net/jaredwilli/L9hns/

var t = { 
scroll: {to: {}, from: {}}, 
init: function() { 
    var li = $('.barthumbs li'), 
     total = li.length; 
    $('li:eq(0)').addClass('active'); 
    var index = $('li.active').index(); 

    $('#next').click(function(e) { 
     index = index+12; 
     if (index > 0) { 
      $('#prev').show(); 
     } 
     t.scroll.to = t.link(index, total); 
     $('#bartender-thumbs') 
      .scrollTo($('#'+t.scroll.to), 500); 
     e.preventDefault(); 
    }); 

    $('#prev').click(function(e) { 
     index = index-12; 
     if (index<total-12) { 
      $('#next').show(); 
     } 
     t.scroll.from = t.link(index, total); 
     $('#bartender-thumbs') 
      .scrollTo($('#'+t.scroll.from), 500); 
     e.preventDefault(); 
    }); 
}, 
link: function(index, total, operator) { 
    $('li').removeClass('active'); 

    var curr = $('li').eq(index); 
    curr.addClass('active'); 
    curr = $('.active').attr('id'); 

    if (index + 12 > total) { 
     $('#next').hide(); 
    } 
    if (index <= 0) { 
     $('#prev').hide(); 
    } 
    return curr; 
} 

は}; t.init（）;

私はあなたの助けに感謝します、それは私に過去の日のナットを運転しています！