1

在我的演示中，我有一个分步表格，我需要使用活动类修复面包屑导航

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

http://jsfiddle.net/xSkgH/75/

(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);

        });
    })
}());
4

3 回答 3

3

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

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

因此，每次单击 Continue 按钮时，都会在面包屑中创建每个链接，active然后几乎立即（即在同一功能内）将它们全部设为 not active。如果您单步调试调试器，您可以看到它们的样式发生变化，然后又变回来。

如果你想制作一个特定的元素active，那么你将不得不以某种方式识别那个特定的元素。本质上，您希望通过以下方式启动该功能：

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

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

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

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

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

于 2012-04-11T15:16:07.100 回答
0

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

   $('.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');
   }
于 2012-04-11T15:16:49.030 回答
0

在您的代码中添加以下函数，

演示

    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);
于 2012-04-11T15:22:06.507 回答