如何 hide/show 上一节和下一节 class 与 jquery

Question

我有一个小网站，其中有几个部分构成了购买表格。所有部分都具有相同的 class 名称，无法重命名。目前，我的代码允许用户在完成当前所在的部分后滚动到下一部分。但是我希望通过添加 Previous/Next 按钮来改变这一点。我意识到可以做到这一点的一种方法是将各个部分分成选项卡。但是，由于代码在 shopify 的流动性中，为了简单起见，我真的很想用 jQuery 而不是选项卡来做到这一点。

这是我当前的设置

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" class 而隐藏其他 "next" 按钮，直到用户单击 "next" 按钮并显示 "back"（更改之前的选择）和 "buy button" 一旦他们到达终点。

我意识到这要求很高，但这对我来说很新，我一直在努力解决这个问题，但收效甚微。我希望在放弃并保持原样之前让它发挥作用。

Answer 1

在此解决方案中，首先您必须创建一个变量并使用它来将 .custom_config 活跃在您的页面中。

例如，在初始情况下，您必须激活第一个按钮，当您第一次单击下一步按钮时激活第二个按钮，依此类推。

因此，创建此变量并将其设置为 1（您的初始值）并完成您的初始情况（即，第一个 .custom_config 活动，然后 .back & #checkoutbtn 隐藏):

$(".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 对于你评论说的问题，尝试在function中加上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>

如何 hide/show 上一节和下一节 class 与 jquery

How to hide/show previous and next section class with jquery

javascript

jquery

liquid

shopify