Javery prev/next navigationカスタムカレンダーのコンテンツを表示/非表示にする

Question

コンテンツを表示/非表示にして、いくつかのprev/nextカレンダーソリューションを作成します。

私は、ナビゲーションのために、このコード（ヶ月以上を追加することにより、柔軟であるべきである）を持つ：

<div class="months"> 
    <div class="082016">2016 august</div> 
    <div class="092016">2016 september</div> 
    <div class="102016">2016 october</div> 
</div> 

やアイテムを：私が達成したい何

<div class="items"> 
    <div id="082016"> 
     <div class="item">August item</div> 
     <div class="item">August item</div> 
     <div class="item">August item</div> 
    </div> 
    <div id="092016"> 
     <div class="item">September item</div> 
     <div class="item">September item</div> 
     <div class="item">September item</div> 
    </div> 
    <div id="102016"> 
     <div class="item">October item</div> 
     <div class="item">October item</div> 
     <div class="item">October item</div> 
    </div> 
</div> 

は、このようなナビゲーションを有することにある。

​​

だから、矢印上のそれは、その月のIDを示すだろうとナビゲーションのタイトルを変更します]をクリック。また、最初の1ヶ月間はバック矢印がなく、ラッツの月には次の矢印がないはずです。

ありがとうございました！あなたの質問のための

Answer 1

私の提案は、純粋なjQueryのスクリプトです：

$(function() { 
 
    var cachedToDivs = $('.months div'); 
 

 
    cachedToDivs.css({'font-weight': 'bold'}); 
 
    $('.items > div:lt(' + (cachedToDivs.length - 1) + ')').hide(); 
 
    $('.months div:lt(' + (cachedToDivs.length - 1) + ')').hide(); 
 

 

 
    cachedToDivs.on('click', 'img', function (e) { 
 
    if ($(':animated').length > 0) { 
 
     return; // wait for last animation... 
 
    } 
 
    var index; 
 
    if (e.target.name == 'prev') { 
 
     index = (-1 + $(this).parent().index()) % cachedToDivs.length; 
 
     index = (index < 0) ? cachedToDivs.length - 1: index; 
 
    } else { 
 
     index = (1 + $(this).parent().index()) % cachedToDivs.length; 
 
    } 
 
    cachedToDivs.eq(index).find('img').remove(); 
 
    var txt = cachedToDivs.eq(index).text().trim(); 
 
    cachedToDivs.eq(index).html('<img name="prev" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-go-previous-icon.png" width="20" height="15"/>&nbsp;&nbsp;&nbsp;' + txt + '&nbsp;&nbsp;&nbsp;<img name="next" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-go-next-icon.png" width="20" height="15"/>'); 
 
    $(this).parent().hide(); 
 
    cachedToDivs.eq(index).show(); 
 
    $('.items > div:visible').slideUp('fast', function() { 
 
     $('.items #' + cachedToDivs.eq(index).attr('class')).slideDown('fast'); 
 
    }) 
 
    if(index == (cachedToDivs.length - 1)) { // on the last month remove next image 
 
     cachedToDivs.eq(index).find('img[name="next"]').remove(); 
 
    } 
 
    if(index == 0) { // on the first month remove prev image 
 
     cachedToDivs.eq(index).find('img[name="prev"]').remove(); 
 
    } 
 
    }); 
 
    cachedToDivs.eq((cachedToDivs.length - 1)).html('<img name="prev" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-go-previous-icon.png" width="20" height="15"/>&nbsp;&nbsp;&nbsp;' + cachedToDivs.eq(2).text().trim() + '&nbsp;&nbsp;&nbsp;<img name="next" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-go-next-icon.png" width="20" height="15"/>'); 
 
    $('.months div:visible img[name="next"]').trigger('click'); 
 
});

.months { 
 
    display: inline-block; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div class="months"> 
 
    <div class="082016">2016 august</div> 
 
    <div class="092016">2016 september</div> 
 
    <div class="102016">2016 october</div> 
 
</div> 
 
<div class="items"> 
 
    <div id="082016"> 
 
     <div class="item">August item</div> 
 
     <div class="item">August item</div> 
 
     <div class="item">August item</div> 
 
    </div> 
 
    <div id="092016"> 
 
     <div class="item">September item</div> 
 
     <div class="item">September item</div> 
 
     <div class="item">September item</div> 
 
    </div> 
 
    <div id="102016"> 
 
     <div class="item">October item</div> 
 
     <div class="item">October item</div> 
 
     <div class="item">October item</div> 
 
    </div> 
 
</div>

完璧作品