複数のdivを矢印に基づいて変更する

Question

ユーザーが自分の仕事を書くための入力セクションを作成しました。私はこれの側に複数のdivを持っていると私はクリックすることができます左右の矢印からdivを変更したいと思います。

$(document).ready(function() { 
    $('.menubody:nth-child(1)').show('slow'); 
    $('.menubody:nth-child(1)').hide('slow'); 
    $('.fa-caret-right').on({ 
    click: function() { 
     var i = $('.menubody:visible').index(); 
     var len = $('.menubody').length; 
     var next; 
     if (i >= 0) { 
     if (i == len - 1) { 
      next = $('.menubody:eq(0)'); 
     } else { 
      next = $('.menubody:eq(' + (i + 1) + ')'); 
     } 
     $('.menubody:visible').hide(); 
     $(next).show(); 
     } 
    } 
    }); 
}); 

EDIT：

私は作業例を持っている（fiddleを参照）、その変化と '右' を押して内容を変更します。

「left」divで内容を前に移動させるにはどうすればよいですか？変更する複数のコンテンツ領域を追加しますか？

例のレイアウト（jQueryではなく）は、see hereとしてください。

Answer 1

はjQueryの.prev()と.next()を使用してください。長さがゼロのコレクションが返された場合は、代わりに.last()と.first()を使用してコンテンツを循環させます（必要がないかどうかはわかりません）。

$(function() { 
 
    $('.tabs-container div').not(':first-child').hide(); 
 

 
    $('#tabs li a').click(function() { 
 
    var $clickedLink = $(this), 
 
     $visible = $('.tabs-container div:visible'); 
 

 
    $visible.each(function(){ 
 
     var $this = $(this), 
 
      $parentContainer = $this.parents('.tabs-container').eq(0), 
 
      $toShow; 
 
     
 
     if($clickedLink.is('.prev')){ 
 
     $toShow = $this.prev('div').length ? $this.prev('div') : $('div', $parentContainer).last(); 
 
     } else { 
 
     $toShow = $this.next('div').length ? $this.next('div') : $('div', $parentContainer).first(); 
 
     } 
 
         
 
     $this.hide(); 
 
     $toShow.show(); 
 
    }); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<ul id="tabs"> 
 
    <li><a href="#" class="prev">Left Arrrow</a> 
 
    </li> 
 
    <li><a href="#" class="next">Right Arrow</a> 
 
    </li> 
 
</ul> 
 
<div class="tabs-container"> 
 
    <div id="content1">Content for link 1. Should display only when Link 1 is clicked.</div> 
 
    <div id="content2">Content for link 2. Should display only when Link 2 is clicked.</div> 
 
    <div id="content3">Content for link 3. Should display only when Link 3 is clicked.</div> 
 
    <div id="content4">Content for link 4. Should display only when Link 4 is clicked.</div> 
 
</div> 
 

 
<p>Unrelated text is here. Text in this area is static and should display at all times.</p> 
 

 
<div class="tabs-container"> 
 
    <div id="content1-2">Additional content for link 1. Should display only when Link 1 is clicked.</div> 
 
    <div id="content2-2">Additional content for link 2. Should display only when Link 2 is clicked.</div> 
 
</div> 
 

 
<p>More unrelated text</p> 
 

 
<div class="tabs-container"> 
 
    <div>A</div> 
 
    <div>B</div> 
 
    <div>C</div> 
 
    <div>D</div> 
 
    <div>E</div> 
 
</div>

Answer 2

ここでは、nth-child（）jQueryセレクタを使用する必要があると思います。ボタンをクリックするたびにnの値を増やし、左矢印をクリックするたびにnの値を小さくします。ここで

$('#left-arrow').on('click', function(){ 
    var i++; 
    $('main-div:nth-child(i-1)').hide(); 
    $('main-div:nth-child(i)').show(); 
}) 

は続きを読むにはリンクです：W3 Schools :nth-child() selector