Параметр .next() jQuery

Question

Имеются несколько div которые скрыты display:none В div-ах есть кнопки radio - при клике на которую меняется div.

https://codepen.io/zikwal/pen/bGVoZXq - тут можно посмотреть всё

$('.test-data').find('div:first').show();
$('.test-data').click(()=>{
    const link = $('.pagination a').attr('href');
    const prevActive = $('.pagination > a.nav-active').attr('href');
    $('input[type=radio]').on('change', ()=>{
        $(prevActive).fadeOut(300, ()=>{
            $(link).next().fadeIn();
        });
    });
});

Данный код выполняет нужную функцию, но только 1 раз. (То есть - первый div скрывается и открывается 2ой div, но дальше, при клике на radio - никаких изменений не происходит)

Нужно, чтобы и при следующих нажатиях на radio - активный div скрывался, а следующий в списке открывался.

Answer 1

Ныа

$('.test-data').children('div:first').show();
$('input[id^="answer"]').click(({currentTarget})=>{
    $(currentTarget).parent().parent().hide().next().fadeIn();
    console.log($(currentTarget).attr('name'), $(currentTarget).val());
});

.q{
    border-bottom: 1px solid #000;
    font-weight: bold;
}
.a {
    padding: 5px 0;
}
.question {
    display: none;
}
.nav-active {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--<div class="pagination">
    <a class="nav-active" href="#question-6"></a>
    <a class="pre-active" href="#question-4">Next</a>
    <a class="pre-active" href="#question-5">Next</a>
    <a class="pre-active" href="#question-3">Next</a>
    <a class="pre-active" href="#question-2">Next</a>
    <a class="pre-active" href="#question-1">Next</a>
</div>-->

<div class="test-data">
    <div class="question" data-id="6" id="question-6">
        <p class="q">Вопрос 1</p>
        <p class="a">
            <input type="radio" id="answer-1" name="question-6" value="1">
            <label for="answer-1">1</label>
        </p>
        <p class="a">
            <input type="radio" id="answer-2" name="question-6" value="2">
            <label for="answer-2">2</label>
        </p>
    </div>
    <div class="question" data-id="4" id="question-4">
        <p class="q">Вопрос 2</p>
        <p class="a">
            <input type="radio" id="answer-1" name="question-4" value="1">
            <label for="answer-1">1</label>
        </p>
        <p class="a">
            <input type="radio" id="answer-2" name="question-4" value="2">
            <label for="answer-2">2</label>
        </p>
    </div>
    <div class="question" data-id="5" id="question-5">
        <p class="q">Вопрос 3</p>
        <p class="a">
            <input type="radio" id="answer-1" name="question-5" value="1">
            <label for="answer-1">1</label>
        </p>
        <p class="a">
            <input type="radio" id="answer-2" name="question-5" value="2">
            <label for="answer-2">2</label>
        </p>
    </div>
</div>

БЛОГ НА HUSL

Параметр .next() jQuery

Ответы (1 шт):