0

一度に 1 つのリスト要素を表示したいと考えています。理想的には、ユーザーがページを開いたときに最初のリスト要素が表示されます。ユーザーが「次へ」ボタンをクリックすると、最初のリスト要素が消え、2 番目のリスト要素が表示されます。ユーザーが「前へ」ボタンをクリックすると、前の要素が表示されます。これまでのところ、次のボタンは正常に機能しますが、前のボタンは li 要素をスクロールしますが、リンク要素に進みます。これは想定されていません。これが私が使用しているコードです。

HTML:

<div class="event_months">
    <a class="prev" href="#">&#60;</a>
    <a class="next" href="#">&#62;</a>
    <li>one</li>
    <li>two</li>
</div>

CSS:

.event_months .noShow {
    display:none;
}

.event_months .doShow {
    display:inline;
}

.event_months .first {
    display:inline !important;
​}

jQuery:

<script type = "text/javascript" > $('document').ready(function() {
    $(".event_months li:nth-child(3)").addClass("doShow");

    $("a.next").click(function() {
        $('.first').toggleClass("first");
        var $toHighlight = $('.doShow').next().length > 0 ? $('.doShow').next() : $('.event_months li').first();
        $('.doShow').removeClass('doShow');
        $toHighlight.addClass('doShow');
    });

    $("a.prev").click(function() {
        $('.first').toggleClass("first");
        var $toHighlight = $('.doShow').prev().length > 0 ? $('.doShow').prev() : $('#event_months li').last();
        $('.doShow').removeClass('doShow');
        $toHighlight.addClass('doShow');
    });

}); 
</script>​​​​​​
4

2 に答える 2

1

前ではなく次の作業の理由は.prev()、最初のアイテムでその前にアンカータグが表示されるため、前のセレクターを使用して機能させるためです。

$(".event_months li:nth-child(3)").addClass("doShow");

$("a.next").click(function() {
    $('.first').toggleClass("first");
    var $toHighlight = $('.doShow').next('li').length > 0 ? $('.doShow').next('li') : $('.event_months li').first();
    $('.doShow').removeClass('doShow');
    $toHighlight.addClass('doShow');
});

$("a.prev").click(function() {
    $('.first').toggleClass("first");
    var $toHighlight = $('.doShow').prev('li').length > 0 ? $('.doShow').prev('li') : $('.event_months li').last();
    $('.doShow').removeClass('doShow');
    $toHighlight.addClass('doShow');
});

フィドル

于 2012-06-18T04:55:39.663 に答える
0

変化する：

$('#event_months li')

に

$('.event_months li')

クラスセレクターの代わりにIDセレクターを使用しました。

于 2012-06-18T04:48:49.753 に答える