我有一个小网站,其中有几个部分构成了购买表格。所有部分都具有相同的类名,无法重命名。目前,我的代码允许用户在完成当前所在的部分后滚动到下一部分。但是我希望通过添加上一个/下一个按钮来改变这一点。我意识到可以做到这一点的一种方法是将各个部分分成选项卡。但是,为了简单起见,我真的很想用 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”类而其他类隐藏,直到用户单击“下一步”按钮并显示“返回”(以更改以前的选择)和“购买按钮”到最后。
我意识到这要求很高,但这对我来说很新,我一直在努力解决这个问题,但收效甚微。我希望在放弃并保持原样之前让它工作。
一只甜甜圈
相关分类