如何使用 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”类而其他类隐藏，直到用户单击“下一步”按钮并显示“返回”（以更改以前的选择）和“购买按钮”到最后。我意识到这要求很高，但这对我来说很新，我一直在努力解决这个问题，但收效甚微。我希望在放弃并保持原样之前让它工作。

Answer 1

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

例如，在 init 情况下，您必须激活第一个，当您第一次单击下一个按钮时，第二个按钮等等。

因此，创建此变量并将其设置为 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 对于您在评论中谈到的问题，请尝试添加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>