prev/next hide и show divs по классу

Question

Я попытался переместиться в divs, я создал следующие и предыдущие теги. У меня есть два класса divs, которые содержат некоторые div. В то время, может отображаться только две дивы, один из class:"divs1" и другая часть его от class:divs2. Вот это HTML код:

<div class="divs1"> 
    <div class="test1 "> Show div 1 part 1</div> 
    <div class="test1 "> Show div 2 part 1</div> 
    <div class="test1 "> Show div 3 part 1</div> 
    <div class="test1 "> Show div 4 part 1</div> 
    <div class="test1 "> Show div 5 part 1</div> 
    <div class="test1 "> Show div 6 part 1</div> 
    <div class="test1 "> Show div 7 part 1</div> 
</div> 
<div class="divs2"> 
    <div class="test2 "> Show div 1 part 2</div> 
    <div class="test2 "> Show div 2 part 2</div> 
    <div class="test2 "> Show div 3 part 2</div> 
    <div class="test2 "> Show div 4 part 2</div> 
    <div class="test2 "> Show div 5 part 2</div> 
    <div class="test2 "> Show div 6 part 2</div> 
    <div class="test2 "> Show div 7 part 2</div> 
</div> 
<br/> 
<a id="next">next</a> 
<a id="prev">prev</a> 

Я пытался сделать это что-то вроде этого, но проблема в том, когда я пытаюсь проверить если есть divs, видимые или нет. Мой код:

$(document).ready(function(){ 
    $(".divs1 .test1").each(function(e) { 
     if (e != 0) 
      $(this).hide(); 
    }); 
    $(".divs2 .test2").each(function(e) { 
     if (e != 0) 
      $(this).hide(); 
    }); 

    $("#next").click(function(){ 
     if ($(".divs test:visible").next().length != 0 && $(".divs2 test2:visible").next().length !=0) 
      $(".divs1 test1:visible").next().show().prev().hide(); 
      $(".divs2 test2:visible").next().show().prev().hide(); 
     return false; 
    }); 

    $("#prev").click(function(){ 
     if ($(".divs test:visible").prev().length != 0 && $(".divs2 test2:visible").prev().length != 0) 
      $(".divs1 test1:visible").prev().show().next().hide(); 
      $(".divs2 test2:visible").prev().show().next().hide(); 
     return false; 
    }); 
}); 

Jsfiddle:. DEMO Любая помощь :(

Answer 1

Это должно работать Вы можете добавить функции, чтобы спасти от того, чтобы выполнить все два раза

window.onload = function(){ 
 
    var divs1Active = document.getElementById('divs1Active'); 
 
    var divs2Active = document.getElementById('divs2Active'); 
 
    $('#next').click(function(){ 
 
    //see if there is another element after the divs1Active element before proceeding 
 
    if(divs1Active.nextElementSibling){ 
 
     $(divs1Active).hide(); 
 
     $(divs2Active).hide(); 
 
     $(divs1Active).next().show(); 
 
     $(divs2Active).next().show(); 
 
     divs1Active.id = ''; 
 
     divs2Active.id = ''; 
 
     divs1Active.nextElementSibling.id = 'divs1Active'; 
 
     divs2Active.nextElementSibling.id = 'divs2Active'; 
 
     divs1Active = document.getElementById('divs1Active'); 
 
     divs2Active = document.getElementById('divs2Active'); 
 
    } 
 
    }); 
 
    
 
    $('#prev').click(function(){ 
 
    //if there is a previous sibling to the divs1Active element 
 
    if(divs1Active.previousElementSibling){ 
 
     $(divs1Active).hide(); 
 
     $(divs2Active).hide(); 
 
     $(divs1Active).prev().show(); 
 
     $(divs2Active).prev().show(); 
 
     divs1Active.id = ''; 
 
     divs2Active.id = ''; 
 
     divs1Active.previousElementSibling.id = 'divs1Active'; 
 
     divs2Active.previousElementSibling.id = 'divs2Active'; 
 
     divs1Active = document.getElementById('divs1Active'); 
 
     divs2Active = document.getElementById('divs2Active'); 
 
    } 
 
    }); 
 
};

.test1{ 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    background-color: #B5B5B5; 
 
    display:none; 
 
} 
 
.test2{ 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    background-color: #B5E2B5; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="divs1" id="divs1"> 
 
    <div class="test1 " style="display:block;" id="divs1Active"> Show div 1 part 1</div> 
 
    <div class="test1 "> Show div 2 part 1</div> 
 
    <div class="test1 "> Show div 3 part 1</div> 
 
    <div class="test1 "> Show div 4 part 1</div> 
 
    <div class="test1 "> Show div 5 part 1</div> 
 
    <div class="test1 "> Show div 6 part 1</div> 
 
    <div class="test1 "> Show div 7 part 1</div> 
 
</div> 
 
<div class="divs2" id="divs2"> 
 
    <div class="test2 " style="display:block;" id="divs2Active"> Show div 1 part 2</div> 
 
    <div class="test2 "> Show div 2 part 2</div> 
 
    <div class="test2 "> Show div 3 part 2</div> 
 
    <div class="test2 "> Show div 4 part 2</div> 
 
    <div class="test2 "> Show div 5 part 2</div> 
 
    <div class="test2 "> Show div 6 part 2</div> 
 
    <div class="test2 "> Show div 7 part 2</div> 
 
</div> 
 
<br/> 
 
<a href="#" id="next">next</a> 
 
<a href="#" id="prev">prev</a>

.

Answer 2

Существует несколько возможных виновников ваших неудовлетворительных результатов. предыдущий комментарий был прав о добавлении href="#" в ваши якорные метки a.

HTML, не должен быть изменен иначе и может безопасно оставаться следующим образом:

<div class="divs1"> 
    <div class="test1"> Show div 1 part 1</div> 
    <div class="test1"> Show div 2 part 1</div> 
    <div class="test1"> Show div 3 part 1</div> 
    <div class="test1"> Show div 4 part 1</div> 
    <div class="test1"> Show div 5 part 1</div> 
    <div class="test1"> Show div 6 part 1</div> 
    <div class="test1"> Show div 7 part 1</div> 
</div> 
<div class="divs2"> 
    <div class="test2"> Show div 1 part 2</div> 
    <div class="test2"> Show div 2 part 2</div> 
    <div class="test2"> Show div 3 part 2</div> 
    <div class="test2"> Show div 4 part 2</div> 
    <div class="test2"> Show div 5 part 2</div> 
    <div class="test2"> Show div 6 part 2</div> 
    <div class="test2"> Show div 7 part 2</div> 
</div> 
<br/> 
<a id="next" href="#">Next</a> 
<a id="prev" href="#">Prev</a> 

CSS-также не должен быть изменен.

Javascript может использовать некоторую отладку и оптимизацию. Например, чтобы избежать сложной отладки, я бы предложил всегда использовать явно заблокированный оператор if. Например:

if (condition) 
    alert("A"); 
    alert("B"); 

приводит только "A" быть предупреждены в то время как углубление предполагает как "A" и "B" будут предупреждены. Поэтому добавление { и } вокруг соответствующего кода даст результаты, которые вы ищете, и сделать отладку намного проще. е. г .:

if (condition) { 
    alert("A"); 
    alert("B"); 
} 

Наконец, я хотел бы предложить хранить неизменные результаты ваших $() вызовов в локальных переменных, чтобы сэкономить несколько вызовов и сделать намерение немного яснее. Все сказали, Javascript может выглядеть так:

$(document).ready(function() { 
    var part1divs = $(".divs1 .test1"), 
     part2divs = $(".divs2 .test2"), 

     next = $("#next"), 
     prev = $("#prev"), 

     visFilter = ":visible"; 

    function hideAllExceptFirst(index) { 
     if (index > 0) { 
      $(this).hide(); 
     } 
    } 

    part1divs.each(hideAllExceptFirst); 
    part2divs.each(hideAllExceptFirst); 

    next.click(function() { 
     var div1vis = part1divs.filter(visFilter), 
      div2vis = part2divs.filter(visFilter); 

     if (div1vis.next().length > 0) { 
      div1vis.next().show().prev().hide(); 
     } 
     if (div2vis.next().length > 0) { 
      div2vis.next().show().prev().hide(); 
     } 

     return false; 
    }); 

    prev.click(function() { 
     var div1vis = part1divs.filter(visFilter), 
      div2vis = part2divs.filter(visFilter); 

     if (div1vis.prev().length > 0) { 
      div1vis.prev().show().next().hide(); 
     } 
     if (div2vis.prev().length > 0) { 
      div2vis.prev().show().next().hide(); 
     } 

     return false; 
    }); 
}); 

Вот JSFiddle link.