Question

我的网站有一个单页结帐，因此我决定将其分为5个部分，并使用javascript一次进行一次或两次显示。

请参阅以下代码：

    <fieldset id="vm-fieldset-pricelist" class="vm-fieldset-pricelist"> ... </fieldset>

    <div id="coupon-section" class="coupon-section display-none"> ... </div>

    <fieldset id="shipment-section" class="shipment-section display-none"> ... </fieldset>

    <div id="edit-account-section" class="billto-shipto display-none"> ... </div>

    <div id="part-five" class="display-none"> ... </div>


    <?php
                    $user = JFactory::getUser();
                    if ($user->guest) { 
                        $usercheckin = '_notloggedin';
                    } else {
                        $usercheckin = '_loggedin';
                    } 
            ?> 

   <button type="button" id="one-to-two<?php echo $usercheckin ?>" class="sabz-button pull-right" onclick="cartButtonHandler(this.id); return false;"><?php echo vmText::_('COM_VIRTUEMART_CHECKOUT_TITLE')?> </button>

<script>

window.cartButtonHandler = function(button_id) {
    switch(button_id) {
    case 'one-to-two_notloggedin':
        document.getElementById("vm-fieldset-pricelist").className = "display-none";
        document.getElementById("com-form-login").className = "";
        document.getElementById(button_id).innerHTML = "ثبت اطلاعات و ادامه خرید";
        document.getElementById(button_id).className = "abi-button pull-right";
        document.getElementById(button_id).id = 'two-to-three';
        break;
    case 'one-to-two_loggedin':
        document.getElementById("vm-fieldset-pricelist").className = "display-none";
        document.getElementById("edit-account-section").className = "billto-shipto display-none";
        document.getElementById("shipment-section").className = "shipment-section";
        document.getElementById(button_id).innerHTML = "ثبت اطلاعات و ادامه خرید";
        document.getElementById(button_id).className = "abi-button pull-right";
        document.getElementById(button_id).id = 'two-to-three';
        break;
    case 'two-to-three':
        document.getElementById("edit-account-section").className = "display-none";
        document.getElementById("shipment-section").className = "display-none";
        document.getElementById("coupon-section").className = "coupon-section";
        document.getElementById(button_id).innerHTML = "بازبینی و تایید سفارش";
        document.getElementById(button_id).id = 'three-to-four';
        break;
   case 'three-to-four':
        document.getElementById("part-chahar").className = "";
        document.getElementById("vm-fieldset-pricelist").className = "vm-fieldset-pricelist";
        document.getElementById("edit-account-section").className = "billto-shipto display-none";
        document.getElementById("shipment-section").className = "shipment-section";
        document.getElementById("coupon-section").className = "coupon-section";
        document.getElementById("handlerbutton-section").className = "display-none";
        document.getElementById(button_id).id = 'four-to-five';
        break;
   case 'four-to-five':
        alert(button_id);
        break;
}
}

    </script>

首先，我不知道javascript，有没有更好的方法在javascript或jquery或...？

我的问题：当用户例如在“优惠券部分”中输入优惠券代码并点击提交按钮时，请注意优惠券提交按钮与NEXT STEP按钮不同，页面重新加载并弹出第一步。或者当用户选中复选框或任何其他交互时，页面重新加载并弹出第一步。

如何保存javascript更改并将其重新加载到页面重新加载，以便用户在与表单交互后可以保持相同的步骤？我想它可能是用饼干或其他东西解决但我不知道该怎么做。

Answer 1

1.通过Jquery进行简单的html（DOM）操作和选择。

浏览文档SessionStorage，（设置并获取broswer中的项目重新加载会议）
学习Json，创建一个json结构来记录进度，并创建一个函数来加载基于该json的部分。（使所有内容由数据驱动）例如：

[

{ sectionName：＆＃34; SECTION1＆＃34 ;, 进度：＆＃34;开始＆＃34; }， { sectionName：＆＃34;第2节＆＃34 ;, 进展：＆＃34;不完全＆＃34; }，
]

希望这有帮助

页面重新加载时，Javascript更改重置

1 个答案: