1

順序付けられていないリストがあり、ul 自体には高さが設定されておらず、li には高さが設定されていません。私は 5 つの li のみを表示し、上下の矢印でそれらを循環させようとしています。私が抱えている問題は、「上」ボタンにあります。この例では、6 つのアイテムがあり、「上」の 6 回目のクリックで、アイテムが非表示になるのではなく、単純にアイテムに追加され、スライダーの目的が無効になります。

HTML

<div id="container">
            <a href="#" id="up">Up</a>
            <a href="#" id="down">Down</a>
          <ul>
            <li><span>Gun 1</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 2</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 3</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 4</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 5</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 6</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
          </ul>
        </div>

JS

$('#container > ul > li:gt(4)').hide();
$('#up').click(function(e){
    var first = $('#container ul li:first');
    first.hide('fast',function(){
    $('#container ul').append(first.show(500));
    $('#container > ul > li:gt(4)').hide();
});
e.preventDefault();
});
$('#down').click(function(e){
    var last = $('#container ul li:last');
    last.hide('fast',function(){
    $('#container ul').prepend(last.show(500));
    $('#container > ul > li:gt(4)').hide();
});
e.preventDefault();
});
4

1 に答える 1

1

これを試してみてください..実際には、upあなたのonclickは最初のliを表示しようとしていましたが、代わりに6番目のものを表示する必要があるため、インデックスが< 5

$('#container > ul > li:gt(4)').hide();
$('#up').click(function(e){
    var first = $('#container ul li:first');
    first.hide('fast',function(){
       $('#container ul').append(first);  //don't show the first one, just append it
       $('#container ul li:lt(5)').show(500); // add this line
       $('#container > ul > li:gt(4)').hide();
    });
    e.preventDefault();
});
$('#down').click(function(e){
    var last = $('#container ul li:last');
    last.hide('fast',function(){
       $('#container ul').prepend(last.show(500));
       $('#container > ul > li:gt(4)').hide();
    });
   e.preventDefault();
});
于 2012-12-04T05:47:28.563 に答える