Как выбрать следующий ul на событии click с помощью jQuery

Question

Я искал в других вопросах, но я не мог найти ответ.

У меня есть код, как это:

<div class="chacter_form"> 
    <form id="new_character" class="new_character" method="post" accept-charset="UTF-8" action="https://stackoverflow.com/users/1/characters"> 
     <ul class="no_dot form_partial active_partial"></ul> 
     <ul class="no_dot hide form_partial test"></ul> 
     <ul class="no_dot hide form_partial"></ul> 
    </form> 
    <button id="prev_form_button"></button> 
    <button id="next_form_button"></button> 
</div> 

Конечно каждый ul имеет некоторое количество li. Я хочу написать функцию jQuery, которая при нажатии на #next_form_button скроет первую ul и покажет вторую. hide класс комплект дисплей нет.

Это моя попытка, но она не работает:

$(document).on('click', '#next_form_button', function(){ 
    $active_partial = $('ul.active_partial') 
    $next_partial = $('ul.active_partial').next('ul') 
    $active_partial.removeClass('active_partial').fadeToggle() 
    $next_partial.addClass('active_partial').fadeToggle() 
}); 

Любая помощь будет оценена

Answer 1

Использование можно использовать :visible селектор для обнаружения видимых ul и использовать next() для нахождения следующего ul.

$("#next").click(function(){ 
 
    if ($("ul:visible").index() < 2) 
 
     $("ul:visible").hide().next().show(); 
 
}); 
 

 
$("#prev").click(function(){ 
 
    if ($("ul:visible").index() > 0) 
 
     $("ul:visible").hide().prev().show(); 
 
});

ul:nth-child(2), 
 
ul:nth-child(3) { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul> 
 
     <li>A</li> 
 
     <li>B</li> 
 
     <li>C</li> 
 
    </ul> 
 
    <ul> 
 
     <li>D</li> 
 
     <li>E</li> 
 
     <li>F</li> 
 
    </ul> 
 
    <ul> 
 
     <li>G</li> 
 
     <li>H</li> 
 
     <li>I</li> 
 
    </ul> 
 
    <button id="prev">Prev</button> 
 
    <button id="next">Next</button> 
 
</div>

Answer 2

Вы можете использовать .toogleClass();

$('#next_form_button').click(function(){ 
 
    $active_partial = $('ul.active_partial'); 
 
    $next_partial = $('ul.active_partial').next('ul'); 
 
    $active_partial.removeClass('active_partial').toggleClass('hide'); 
 
    $next_partial.addClass('active_partial').toggleClass('hide'); 
 
});

.hide{ 
 
display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="chacter_form"> 
 

 
    <form id="new_character" class="new_character" method="post" accept-charset="UTF-8" action="https://stackoverflow.com/users/1/characters"> 
 
    <ul class="no_dot form_partial active_partial" >first</ul> 
 
    <ul class="no_dot hide form_partial test">second</ul> 
 
    <ul class="no_dot hide form_partial">Third</ul> 
 
</form> 
 
<button id="prev_form_button"></button> 
 

 
<button id="next_form_button">toggle</button> 
 

 
</div>

Answer 3

Вот полный snippet вы найдете его очень удобно :)

Благодаря

$(function(){ 
 
    var allUL = $("form ul").length; 
 
    $("#next_form_button").click(function(){ 
 
    allUL--; 
 
    var currentUL = $(".active_partial"); 
 
    if(allUL == 0){  $(currentUL).removeClass("active_partial").addClass("hide"); 
 
    $("form ul:eq(0)").addClass("active_partial").removeClass("hide"); 
 
allUL = $("form ul").length; 
 
    } else { $(currentUL).next("ul").addClass("active_partial").removeClass("hide"); 
 
    $(currentUL).removeClass("active_partial").addClass("hide"); 
 
     } 
 
}); 
 
    
 
    $("#prev_form_button").click(function(){ 
 
    allUL++; 
 
    var currentUL = $(".active_partial"); 
 
    if(allUL > 3){ $(currentUL).removeClass("active_partial").addClass("hide"); 
 
    $("form ul:eq(2)").addClass("active_partial").removeClass("hide"); 
 
allUL = $("form ul").length - 2; 
 
    } else { $(currentUL).prev("ul").addClass("active_partial").removeClass("hide"); 
 
    $(currentUL).removeClass("active_partial").addClass("hide"); 
 
     } 
 
}); 
 
    
 
});

.hide{ 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="chacter_form"> 
 

 
    <form id="new_character" class="new_character" method="post" accept-charset="UTF-8" action="https://stackoverflow.com/users/1/characters"> 
 

 
    <ul class="no_dot form_partial active_partial"> 
 
     <li>ul li 1</li> 
 
     <li>ul li 1</li> 
 
     <li>ul li 1</li> 
 
     <li>ul li 1</li> 
 
     </ul> 
 
    <ul class="no_dot hide form_partial test"> 
 
     <li>ul li 2</li> 
 
     <li>ul li 2</li> 
 
     <li>ul li 2</li> 
 
     <li>ul li 2</li> 
 
     </ul> 
 
    <ul class="no_dot hide form_partial"> 
 
     <li>ul li 3</li> 
 
     <li>ul li 3</li> 
 
     <li>ul li 3</li> 
 
     <li>ul li 3</li> 
 
     </ul> 
 

 
</form> 
 
<button id="prev_form_button">Prev</button> 
 

 
<button id="next_form_button">Next</button> 
 

 
</div>

Answer 4

выглядит ваш код сам по себе работает, с небольшой модификацией

$(document).on('click', '#next_form_button', function(){ 
    $active_partial = $('ul.active_partial') 
    $next_partial = $('ul.active_partial').next('ul') 
    $active_partial.removeClass('active_partial').fadeToggle() 
    $next_partial.addClass('active_partial').show() 
});