jquery 一步步形式

Question

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

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

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

        });
    })
}());

Answer 1

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

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

因此，每次单击“继续”按钮时，都会使面包屑中的每个链接处于事件状态，然后几乎立即(即在同一函数内)使它们全部处于非事件状态.如果您单步执行调试器，您可以看到它们的样式发生变化，然后又变回来。

如果您想让某个特定元素处于事件状态，那么您必须以某种方式识别该特定元素。本质上，您希望这样启动该函数:

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

这样一来，您就可以“停用”任何一个事件的(因为您不关心哪一个处于事件状态，所以只需点击所有它们即可)。然后，您需要确定要添加 active 类的特定元素。这可能有点棘手。

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

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

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