javascript - 尝试反转单击功能的效果会显示所有内容

Question

让我首先快速总结一下我必须更好地解释这一点的内容。

我正在创建一个结帐页面。在该页面中，我分为三个部分。这些单独的部分都在同一页面上，但我将其设置为一次仅显示一个部分。这些部分是:

1. 送货信息
2. 账单信息
3. 订单确认

所以它的设置方式是，如果您单击继续转到下一部分，该部分将隐藏，而另一部分将显示。效果很好。我遇到的问题是我正在尝试创建一种方法来返回上一部分，以防客户需要编辑过去部分中的信息。

出于某种原因，我添加的尝试返回到最后一部分的代码使所有部分同时显示。

所以这些部分是这样的:

运输信息代码，然后 -

<button class="checkoutbutton" id="btnProceedBillingInfo"> Proceed to Billing Information</button>

账单信息代码，然后 -

<button class="checkoutbutton" id="btnPreAuthorize">Proceed to Order Confirmation</button>

JS

进入账单信息部分

$('#btnProceedBillingInfo ').click(function () {
    $(".shippinginfocontainer").hide();
    $('.paymentinfocontainer').show("slow");
 }

正在确认部分

$('#btnPreAuthorize').click(function () {
    $(".checkoutprocess > div").hide();
    $('.confirmationinfocontainer').show("slow");
    $('#widebutton').show("slow");
}

我尝试在 html 页面中添加以下代码来使其正常工作:

<input class="backInCart" id="backToShippingInfo" value="Back to Shipping Information">

然后添加以下JS:

$('#backToShippingInfo').click(function () {
    $(".paymentinfocontainer").hide();
    $('.shippinginfocontainer').show("slow");
}

所以本质上，我只是想扭转这个过程。我使用输入数字返回该部分，因为我不希望为后退链接显示按钮。

如果这没有什么意义，您可以访问我的网站 buyfarbest.com 以真正了解我正在努力实现的目标。当您单击“返回送货信息”或“帐单信息”时，我只想发生相反的影响。

Answer 1

似乎你有一个语法错误，它破坏了 js 的执行。缺少结束语 ');'在所有点击处理程序上

$('#backToShippingInfo').click(function () {
    $(".paymentinfocontainer").hide();
    $('.shippinginfocontainer').show("slow");
});  // <- this guy here