如何使用 jquery 隐藏/显示上一节和下一节类

我有一个小网站,其中有几个部分构成了购买表格。所有部分都具有相同的类名,无法重命名。目前,我的代码允许用户在完成当前所在的部分后滚动到下一部分。但是我希望通过添加上一个/下一个按钮来改变这一点。我意识到可以做到这一点的一种方法是将各个部分分成选项卡。但是,为了简单起见,我真的很想用 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”类而其他类隐藏,直到用户单击“下一步”按钮并显示“返回”(以更改以前的选择)和“购买按钮”到最后。


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


四季花海
浏览 228回答 1
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(){&nbsp; &nbsp; if(i <= 1){&nbsp; &nbsp; &nbsp; &nbsp; // if i is equals to or smaller than 1...&nbsp; &nbsp; &nbsp; &nbsp; i = 1; // ...put i always equals to 1...&nbsp; &nbsp; &nbsp; &nbsp; $(".back").hide() // ...hide .back button&nbsp; &nbsp; &nbsp; &nbsp; $(".next").show(); // ...show .next button&nbsp; &nbsp; } else if (i >= $(".custom_config").length){&nbsp; &nbsp; &nbsp; &nbsp; // if i is equals to or greater than the .custom_config length...&nbsp; &nbsp; &nbsp; &nbsp; i = $(".custom_config").length; // ...put i always equals to your .custom_config length&nbsp; &nbsp; &nbsp; &nbsp; $("#checkoutbtn").show(); // ...then show checkoutbtn&nbsp; &nbsp; &nbsp; &nbsp; $(".next").hide(); // ...hide next button&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; // in all other cases...&nbsp; &nbsp; &nbsp; &nbsp; $("#checkoutbtn").hide(); // hide checkout button&nbsp; &nbsp; &nbsp; &nbsp; $(".back, next").show(); // show back & next button&nbsp; &nbsp; }&nbsp; &nbsp; $(".custom_config").removeClass("open"); // after that always remove class open to all your .custom_config div...&nbsp; &nbsp; $(".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){&nbsp; &nbsp; if($(this).hasClass("next")) i ++;&nbsp; &nbsp; else i --;&nbsp; &nbsp; control();});编辑 1 对于您在评论中谈到的问题,请尝试添加e.preventDefault();到功能:$(".next, .back").on("click", function(e){&nbsp; &nbsp; e.preventDefault(); //add this line&nbsp; &nbsp; if($(this).hasClass("next")) i ++;&nbsp; &nbsp; else i --;&nbsp; &nbsp; control();});还添加$(".next").show();到函数control以防止我注意到的一个小错误。我用这些更改重写了代码段,试试看:$(".back, #checkoutbtn").hide();$(".custom_config:nth-of-type(1)").addClass("open");var i = 1;$(".next, .back").on("click", function(e){&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; if($(this).hasClass("next")) i ++;&nbsp; &nbsp; else i --;&nbsp; &nbsp; control();});function control(){&nbsp; &nbsp; if(i <= 1){&nbsp; &nbsp; &nbsp; &nbsp; i = 1;&nbsp; &nbsp; &nbsp; &nbsp; $(".back").hide()&nbsp; &nbsp; &nbsp; &nbsp; $(".next").show();&nbsp; &nbsp; } else if (i >= $(".custom_config").length){&nbsp; &nbsp; &nbsp; &nbsp; i = $(".custom_config").length;&nbsp; &nbsp; $(".next").hide();&nbsp; &nbsp; &nbsp; &nbsp; $("#checkoutbtn").show();&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $("#checkoutbtn").hide();&nbsp; &nbsp; &nbsp; &nbsp; $(".back, .next").show();&nbsp; &nbsp; }&nbsp; &nbsp; $(".custom_config").removeClass("open");&nbsp; &nbsp; $(".custom_config:nth-of-type("+i+")").addClass("open");}/* you can remove these CSS */.custom_config:nth-of-type(1){&nbsp; &nbsp; background-color:red;}.custom_config:nth-of-type(2){&nbsp; &nbsp; background-color:yellow;}.custom_config:nth-of-type(3){&nbsp; &nbsp; background-color:green;}/* you can remove these CSS */.custom_config{&nbsp; &nbsp; display:none;}.open{&nbsp; &nbsp; 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">&nbsp;&nbsp; &nbsp;<ul>&nbsp; &nbsp; &nbsp; &nbsp; <li><input class="choice" id="keep" type="radio" name="properties[Background]" value="keep" required="">&nbsp; &nbsp; &nbsp; &nbsp; <label for="keep">Keep</label></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><input class="choice" id="remove" type="radio" name="properties[Background]" value="remove" required="">&nbsp; &nbsp; &nbsp; &nbsp; <label for="remove">Remove</label></li>&nbsp; &nbsp; </ul>&nbsp;</section>&nbsp;<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>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript