-1

我正在制作一个相当长的表单，我希望能够将表单分解为可选项卡部分，然后在离开最后一个输入/选择框时，下一个部分将滑动打开，而前一个幻灯片关闭。我也想拥有字段集图例，可单击以实现相同的目的。

我正在寻找的一个很好的例子可以在这里找到：http: //jsfiddle.net/s4vcX/

这是我目前正在使用的：http: //jsfiddle.net/AUf3U/

如果您愿意，可以在此处查看当前的 JavaScript 代码：

$("fieldset label").hide();
$("fieldset ul").hide();
$("fieldset:first label").show();

// show when legend is clicked while hiding  rest
$("legend").bind("click", function () {
   $("fieldset label").not($(this).nextAll("label")).hide();
   $(this).nextAll("label").show();
});


//handle shift-tab on first input of each field set
$("fieldset").find("input:first").bind("keydown", function (e) {
    if( e.shiftKey && e.which == 9 ) {
        $(this).closest(".hidesfieldset").find("label").hide();
        var previous = $(this).closest(".hidesfieldset").prev(".hidesfieldset");
        if(previous.length==0)
            previous = $(this).closest("form").find(".hidesfieldset:last");
        previous.find("label").show();
        previous.find("input").last().focus();
        e.preventDefault();
    }
});

//handle tab on last input of each field set
$("fieldset").find("input:last").bind("keydown", function (e) {
    if( !e.shiftKey && e.which == 9 ) {
        $(this).closest(".hidesfieldset").find("label").hide();
        var next = $(this).closest(".hidesfieldset").next(".hidesfieldset");
        if(next.length==0)
            next = $(this).closest("form").find(".hidesfieldset:first");
        next.find("label").show();
        next.find("input").first().focus();
        e.preventDefault();
    }
});

如果有人能指出这里出了什么问题，我会非常感激，这已经成为一个巨大的痛苦，并且必须在大约 50 种形式中推动这一点，所以改变我的形式的结构不一定是好的事物。

4

1 回答 1

0

问题是您的输入选择器，因为您使用的是元素选择器，它只选择带有标签的元素，input但在您的第一个字段集中，最后一个元素是一个select元素。

尝试使用:input 选择器

//handle shift-tab on first input of each field set
$("fieldset").find(":input:last").bind("keydown", function (e) {
    if (e.shiftKey && e.which == 9) {
        $(this).closest(".hidesfieldset").find("label").hide();
        var previous = $(this).closest(".hidesfieldset").prev(".hidesfieldset");
        if (previous.length == 0) previous = $(this).closest("form").find(".hidesfieldset:last");
        previous.find("label").show();
        previous.find("input").last().focus();
        e.preventDefault();
    }
});

//handle tab on last input of each field set
$("fieldset").find(":input:last").bind("keydown", function (e) {
    if (!e.shiftKey && e.which == 9) {
        $(this).closest(".hidesfieldset").find("label").hide();
        var next = $(this).closest(".hidesfieldset").next(".hidesfieldset");
        if (next.length == 0) next = $(this).closest("form").find(".hidesfieldset:first");
        next.find("label").show();
        next.find(":input").first().focus();
        e.preventDefault();
    }
});

演示：小提琴

于 2013-09-26T00:52:38.590 回答