Question

在我的演示中我有一步一步的表格，我需要使用活动类来修复痕迹导航

它一切正常，但菜单上的活动似乎不起作用。你能快点看一下我吗？

(function () {
    var prevLink = '<input class="button cancel" type="button" value="cancel">';
    var nextLink = '<input class="button continue" type="button" value="Continue">';
    var navHTML = '<div class="prev-next">' + prevLink + nextLink + '</div>';
    var FormData = [];

    $(function() {
        // init
        $('#stepbystep > fieldset').hide().append(navHTML);
        $('#first-step .cancel').remove();
        $('#last-step .continue').remove();

        // show first step
        $('#first-step').show();

        $('input.continue').click(function() {
            var whichStep = $(this).parent().parent().attr('id');
            $('.breadcrumb a').addClass('active');

            if (whichStep == 'first-step') { }
            else if (whichStep == 'second-step') { }
            else if (whichStep == 'third-step') { }
            else if (whichStep == 'fourth-step') { }
            else if (whichStep == 'last-step') { }

            $(this).parent().parent().hide(300).next().show(300);
            $('.breadcrumb a').removeClass('active');
        });

        $('input.cancel').click(function() {
        $(this).parent().parent().hide(300).prev().show(300);

        });
    })
}());

Answer 1

它不起作用的原因是代码是这样的：

$('.breadcrumb a').addClass('active');
// other stuff
$('.breadcrumb a').removeClass('active');

因此，每次单击“继续”按钮时，都会在面包屑active中创建每个链接，然后几乎立即（即在同一个函数中）使它们全部不是active。如果您单步执行调试器，则可以看到它们的样式发生变化，然后再进行更改。

如果您想制作特定元素active，那么您将不得不以某种方式识别该特定元素。基本上，你想用这个开始这个功能：

$('.breadcrumb a').removeClass('active');

这样你就可以“去激活”active中的任何一个（因为你不关心哪一个是活跃的，所以只需点击它们）。然后，您需要确定要添加active类的特定元素。这可能有点棘手。

也许给每个人id，以便您可以直接引用它们？或者，既然你似乎已经有了“第一步”和“第二步”等概念，你可以用这样的东西来引用它们：

$('.breadcrumb a').eq(2).addClass('active');

这将引用匹配元素中的第三个元素（索引2），因此它适用于“第三步”。

Answer 2

看起来你的目标是所有面包屑链接：

   $('.breadcrumb a').addClass('active');

您可能希望为链接指定一个id，然后在if语句中添加该类。

   var whichStep = $(this).parent().parent().attr('id');
   // remove active from all links then add back the to the step you are on    
   $('.breadcrumb a').removeClass('active');

   if (whichStep == 'first-step') { 
     $('.breadcrumb #stepOne').addClass('active');
   }

Answer 3

在您的代码中添加以下功能

DEMO

    function updateBreadCrumb (whichStep, isCancel) {
       var bc = 1;
       if (isCancel) bc = -1;
       $('.breadcrumb a').removeClass('active');

       if (whichStep == 'second-step') {
           bc += 1;
        } else if (whichStep == 'third-step') {
           bc += 2;
        } else if (whichStep == 'fourth-step') {
           bc += 3;
        } else if (whichStep == 'last-step') {
           bc += 4;
        }
        $('.breadcrumb a:eq('+bc+')').addClass('active');
    }

然后按如下方式调用它们，

   //Inside Continue click
   updateBreadCrumb ( whichStep, false);

   //Inside Cancel click
   updateBreadCrumb ( whichStep, true);

jquery一步一步表格

3 个答案: