Question

场景：

我正在使用＆＃34; parsley.js＆＃34;步骤表单，它适用于下一个，上一个按钮，它也验证表单字段。

This is the link of page i am trying to build

标签按钮如下：1）网页设计2）网页托管3）seo 4）ppc和第五个标签不会从标签按钮导航，这是＆＃34;（5）结算表格＆＃34;。用户只需在选择ppc包后单击页面底部的下一步即可访问帐单表单。

注意：不需要Seo和PPC。

我想要实现的目标

选择网页设计时，我已禁用seo和ppc部分。用户只能点击托管标签，但为了转到托管用户，应该从网页设计中选择一个套餐（我已经实现了这个）。

当选择托管时我已经禁用了ppc.User将能够点击网页设计和seo标签但是为了进入seo标签用户应该从托管中选择一个包（我已经实现了这个）。

当选择seo时，用户可以轻松转到上一个和下一个选项卡。使用可用的选项卡按钮。（我已经实现了这个）

问题

一切正常但我的代码中存在问题，在我们到达ppc按钮后，所有以前的标签按钮都能正常工作。达到ppc部分后，用户应单击下一步按钮进入开票表单部分（选项卡按钮无法访问）。如果用户点击了之前的标签按钮而不是我的代码无法满足其目的的底部的下一个或上一个按钮。

例如：如果您在到达ppc选项卡后单击网页设计选项卡，则会启用所有按钮。但是当我在第一部分时，我的代码应该禁用第3和第4个按钮。

另一个问题

用户遇到第一个问题后。如果我们将在标签按钮之间来回切换，则转到点击标签需要10秒以上。（所以我认为我的算法不正确）。

请帮帮我。在此先感谢（我已附上以下实时页面的链接）

这是我的jquery代码

// Tab and step form together
$(function () {
    var $sections = $('.parsley-form .form-section');
    var $navs = $("#navigator li a");

    function navigateTo(index, callback ) {
        // Mark the current section with the class 'current'
        $sections.removeClass('current').eq(index).addClass('current');
        $navs.removeClass('selected').eq(index).addClass('selected');

        // Show only the navigation buttons that make sense for the current section:
        $('.form-navigation .previous').toggle(index > 0);
        var atTheEnd = index >= $sections.length - 1;
        $('.form-navigation .next').toggle(!atTheEnd);
        $('.form-navigation [type=submit]').toggle(atTheEnd);

        if (typeof callback === "function") {
            callback();
        }
    };

    // scroll top after next or prev click
    $('.previous, .next').click(function(){
        $('html, body').animate({scrollTop : -400},800);
        return false;
    });

    function curIndex() {
        // Return the current index by looking at which section has the class 'current'
        return $sections.index($sections.filter('.current'));
    };

    // Previous button is easy, just go back
    $('.form-navigation .previous').click(function() {
        navigateTo(curIndex() - 1, function(){navigate_as_tab()} );
    });

    // Next button goes forward iff current block validates
    $('.form-navigation .next').click(function() {
        if ($('.parsley-form').parsley().validate({group: 'block-' + curIndex()}))
            navigateTo(curIndex() + 1, function(){navigate_as_tab()} );
    });

    // Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.
    $sections.each(function(index, section) {
        $(section).find(':input').attr('data-parsley-group', 'block-' + index);
    });

    // Navigate as tab
    function navigate_as_tab(){
        alert('this is current index ->'+curIndex());
        switch (curIndex()) {
        case 0:
            $('a#a0, a#a2, a#a3, a#a4').on("click",function(){
                return false;
            });
            $('a#a1').on("click",function(){
                if ($('.parsley-form').parsley().validate({group: 'block-' + curIndex()})){
                    navigateTo(1, function(){navigate_as_tab()} );
                    return false;   
                } else {
                    return false;
                }
            });
            break;

        case 1:
            $('a#a1, a#a3, a#a4').on("click",function(){
                return false;
            });
            $('a#a0').on("click",function(){
                navigateTo(0, function(){navigate_as_tab()} );
                return false;   
            });
            $('a#a2').on("click",function(){
                if ($('.parsley-form').parsley().validate({group: 'block-' + curIndex()})){
                    navigateTo(2, function(){navigate_as_tab()} );
                    return false;   
                } else {
                    return false;
                }
            });
            break;

        case 2:
            $('a#a2, a#a4').on("click",function(){
                return false;
            });
            $('a#a0').on("click",function(){
                navigateTo(0, function(){navigate_as_tab()} );
                return false;   
            });
            $('a#a1').on("click",function(){
                navigateTo(1, function(){navigate_as_tab()} );
                return false;   
            });
            $('a#a3').on("click",function(){
                if ($('.parsley-form').parsley().validate({group: 'block-' + curIndex()})){
                    navigateTo(3, function(){navigate_as_tab()} );
                    return false;   
                } else {
                    return false;
                }
            });
            break;

        case 3:
            $('a#a3, a#a4').on("click",function(){
                return false;
            });
            $('a#a0').on("click",function(){
                navigateTo(0, function(){navigate_as_tab()} );
                return false;   
            });
            $('a#a1').on("click",function(){
                navigateTo(1, function(){navigate_as_tab()} );
                return false;   
            });
            $('a#a2').on("click",function(){
                navigateTo(2, function(){navigate_as_tab()} );
                return false;   
            });
            break;

        default: 
            $('a#a0, a#a1, a#a2, a#a3, a#a4').on("click",function(){ return false; });
            break;
        }// end of switch case      
    };

    // Start at the beginning
    navigateTo(0, function(){navigate_as_tab()} ); 

});// end of tab and step form

This is the link for js file if you want to have a look at it.

带有Tab，jquery验证和下一个上一个按钮

0 个答案: