Как скрыть / показать предыдущий и следующий класс раздела с помощью jquery

Question

У меня есть небольшой сайт, где у меня есть несколько разделов, которые составляют форму покупки. Все разделы имеют одинаковое имя класса, которое нельзя переименовать. В настоящее время мой код позволяет пользователю переходить к следующему разделу после завершения текущего, в котором он находится. Однако я хочу изменить это, добавив кнопки «Предыдущий / Следующий». Я понимаю, что это можно сделать, разделив разделы на вкладки. Однако я действительно хотел бы сделать это с помощью jQuery вместо вкладок для простоты из-за того, что код находится в жидкости shopify.

Вот как выглядит моя текущая настройка

HTML (отсутствует некоторая информация для упрощения)

<form method="post" action="/cart/add" id="12345" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="product"><input type="hidden" name="utf8" value="✓">

<section class="custom_config"> 
   <ul>
        <li><input class="choice" id="keep" type="radio" name="properties[Background]" value="keep" required="">
        <label for="keep">Keep</label></li>
        <li><input class="choice" id="remove" type="radio" name="properties[Background]" value="remove" required="">
        <label for="remove">Remove</label></li>
    </ul> 
</section> 
<section class="custom_config"> ... </section>
<section class="custom_config"> ... </section>

<button id="checkoutbtn" type="submit" class="btn btn-lg js-add-to-cart-product-page" data-product-handle="custom" data-variant-id="20262476120160" title="Add to Cart"><span>Add to Cart</span></button>
</form>

и jQuery перемещают пользователя в следующую часть раздела после завершения текущего раздела.

$('.choice').on('change', function() {
    var nextQuestion = $(this).closest('.custom_config').next();

    if (nextQuestion.length !== 0) {
        $('html, body').animate({
            scrollTop: nextQuestion.offset().top
        }, 1000);
    }
});

$('.tab-title').on('change', function() {
    var nextQuestion = $(this).closest('.custom_config').next();

    if (nextQuestion.length !== 0) {
        $('html, body').animate({
            scrollTop: nextQuestion.offset().top
        }, 1000);
    }
});

Как это можно изменить, чтобы только первый "Показывается класс custom_config ", а остальные скрыты до тех пор, пока пользователь не нажмет кнопку" Далее "и не покажет" назад "(чтобы изменить предыдущий выбор) и" кнопку покупки ", как только они достигнут конца.

IПонимаю, что это требует много, но это очень ново для меня, и я пытался понять это с очень небольшим успехом. Я пытаюсь заставить это работать, прежде чем сдаться и оставить все как есть.

Answer 1

В этом решении, прежде всего, вам нужно создать переменную и использовать ее для указания числа .custom_config активных на вашей странице.

Например, в ситуации инициализации вам придетсяАктивируйте первый, когда вы нажимаете первый раз на кнопку «Далее», второй и т. д.

Итак, создайте эту переменную и установите ее равной 1 (ваше начальное значение), а также завершите исходную ситуацию (т. е. first .custom_config active и .back & #checkoutbtn hidden):

$(".back, #checkoutbtn").hide();
$(".custom_config:nth-of-type(1)").addClass("open");
var i = 1;

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

function control(){
    if(i <= 1){
        // if i is equals to or smaller than 1...
        i = 1; // ...put i always equals to 1...
        $(".back").hide() // ...hide .back button
        $(".next").show(); // ...show .next button
    } else if (i >= $(".custom_config").length){
        // if i is equals to or greater than the .custom_config length...
        i = $(".custom_config").length; // ...put i always equals to your .custom_config length
        $("#checkoutbtn").show(); // ...then show checkoutbtn
        $(".next").hide(); // ...hide next button
    } else {
        // in all other cases...
        $("#checkoutbtn").hide(); // hide checkout button
        $(".back, next").show(); // show back & next button
    }

    $(".custom_config").removeClass("open"); // after that always remove class open to all your .custom_config div...
    $(".custom_config:nth-of-type("+i+")").addClass("open"); //and put it to correct .custom_config that you need to see
}

Теперь ваши кнопки .next и .back должны только добавлять или удалять единицы из вашей переменной:

$(".next, .back").on("click", function(e){
    if($(this).hasClass("next")) i ++;
    else i --;
    control();
});

РЕДАКТИРОВАТЬ 1 Для проблемы, о которой вы говорите в своем комментарии, попробуйте добавить e.preventDefault(); к функции:

$(".next, .back").on("click", function(e){
    e.preventDefault(); //add this line
    if($(this).hasClass("next")) i ++;
    else i --;
    control();
});

Также добавьте $(".next").show(); к функции controlчтобы предотвратить небольшую ошибку, которую я заметил. Я переписал фрагмент с этими изменениями, попробуйте:

$(".back, #checkoutbtn").hide();
$(".custom_config:nth-of-type(1)").addClass("open");
var i = 1;

$(".next, .back").on("click", function(e){
    e.preventDefault();
	if($(this).hasClass("next")) i ++;
	else i --;
	control();
});

function control(){
	if(i <= 1){
		i = 1;
		$(".back").hide()
        $(".next").show();
	} else if (i >= $(".custom_config").length){
		i = $(".custom_config").length;
    $(".next").hide();
		$("#checkoutbtn").show();
	} else {
		$("#checkoutbtn").hide();
		$(".back, .next").show();
	}

	$(".custom_config").removeClass("open");
	$(".custom_config:nth-of-type("+i+")").addClass("open");
}

/* you can remove these CSS */
.custom_config:nth-of-type(1){
	background-color:red;
}

.custom_config:nth-of-type(2){
	background-color:yellow;
}

.custom_config:nth-of-type(3){
	background-color:green;
}
/* you can remove these CSS */


.custom_config{
	display:none;
}

.open{
	display:block;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<form method="post" action="/cart/add" id="12345" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data">
<input type="hidden" name="form_type" value="product">
<input type="hidden" name="utf8" value="✓">

<section class="custom_config"> 
   <ul>
        <li><input class="choice" id="keep" type="radio" name="properties[Background]" value="keep" required="">
        <label for="keep">Keep</label></li>
        <li><input class="choice" id="remove" type="radio" name="properties[Background]" value="remove" required="">
        <label for="remove">Remove</label></li>
    </ul> 
</section> 
<section class="custom_config"> Content 2 </section>
<section class="custom_config"> Content 3 </section>


<button class="back">Back</button>
<button class="next">Next</button>
<button id="checkoutbtn" type="submit" class="btn btn-lg js-add-to-cart-product-page" data-product-handle="custom" data-variant-id="20262476120160" title="Add to Cart"><span>Add to Cart</span></button>
</form>