Question

我有一个分布在多个div上的表单，使用jQuery显示和关闭。我想禁用第一个和最后一个div上的下一个和上一个按钮，当它们可见时。

这听起来像是一个简单的任务，基于我对jQuery的了解很少，但事实证明，考虑到我现有的代码，它比我想象的要困难。

以下是我当前的下一个和上一个按钮功能

    var sel = "div[data-type='form']";
    var current = $(sel).get(0);

    $(sel).not(current).hide();

    $("#next").click(function () {
        if ($(form).valid()) {
            current = $(current).next(sel);
            $(current).show();
            $(sel).not(current).hide();
        } 
    });

    $("#prev").click(function () {
        current = $(current).prev(sel);
        $(current).show();
        $(sel).not(current).hide();

    });

以下是http://jsfiddle.net/GZ9H8/6/

目前正在发生的事情

Answer 1

这works（注意：为了测试目的，我删除了验证）。

$("#next").click(function () {
    if (true) {
        current = $(current).next(sel);
        $(current).show();
        $(sel).not(current).hide();
        if (!$(current).next(sel).get(0)){
            $(this).hide();
        }
        if ($(current).prev(sel).get(0)){
             $("#prev").show();
        }
    }
});

$("#prev").click(function () {
    current = $(current).prev(sel);
    $(current).show();
    $(sel).not(current).hide();
    if ($(current).next(sel).get(0)){
       $("#next").show();
    }
    if (!$(current).prev(sel).get(0)){
        $(this).hide();
    }
});

请注意，上一个按钮可能应该从头开始隐藏。此外，如果需要，您可以禁用而不是隐藏。

Answer 2

这可能很有用：

$("#next").click(function () {
    if ($(form).valid()) {
        current = $(current).next(sel);
        $(current).show();
        $(sel).not(current).hide();

        // Last element's index is equal to length - 1
        $(this).attr('disabled', current.index(sel) == $(sel).length - 1);
        // First element's index is equal to 0
        $("#prev").attr('disabled', current.index(sel) == 0);
    }
});

$("#prev").click(function () {
    current = $(current).prev(sel);
    $(current).show();
    $(sel).not(current).hide();

    // Last element's index is equal to length - 1
    $("#next").attr('disabled', current.index(sel) == $(sel).length - 1);
    // First element's index is equal to 0
    $(this).attr('disabled', current.index(sel) == 0);
});

此致

找出最后一个div是否可见，然后禁用下一个按钮？

2 个答案: