Question

我有这个HTML：

<form action="" id="product_create" method="post">
    <ul>
        <li id="tab1" data-display="categories-picker"><a href="#">Seleccionar categoría</a></li>
        <li id="tab2" data-display="product-create-step-2"><a href="#">Datos</a></li>
        <li id="tab3" data-display="product-create-step-3" style="display: none"><a href="#">Variaciones</a></li>
        <li id="tab4" data-display="product-create-step-4"><a href="#">Detalles del Producto</a></li>
        <li id="tab5" data-display="product-create-step-5"><a href="#">Condiciones de Venta</a></li>
    </ul>

    <fieldset id="categories-picker">
        ....
    </fieldset>

    <fieldset id="product-create-step-2" style="display: none">
        ....
    </fieldset>

    <fieldset id="product-create-step-3" style="display: none">
        ....
    </fieldset>

    <fieldset id="product-create-step-4" style="display: none">
        ....
    </fieldset>

    <fieldset id="product-create-step-5" style="display: none">
        ....
    </fieldset>

    <button type="button" name="finish-wizard" id="finish-wizard" style="display:none">Finish</button>
</form>

<button type="button" name="previous" id="previous-step" disabled="disabled">&#171; Previous</button>
<button type="button" name="next" id="next-step">Next &#187;</button>

为了切换或隐藏上一个/ show next，我需要在点击$(input[name="next"])或$(input[name="previous"])时获取上一个/下一个fieldset元素的ID，但我创建了此代码：

var first = $('fieldset').eq(0).attr('id');
var step = 1;

$('#next-step').click(function() {
    if (step >= 1) {
        $("#previous-step").removeAttr("disabled");
    }

    var current = $('fieldset').eq(step).next('fieldset');
    var previous = $('fieldset').eq(step).prev('fieldset');
    current.show();
    previous.hide();
    step++;
});

$('#previous-step').click(function() {
    var current = $('fieldset').eq(step).next('fieldset');
    var previous = $('fieldset').eq(step).prev('fieldset');
    current.hide();
    previous.show();
    step--;
});

但它不能正常工作，有人可以给我一个帮助吗？

Answer 1

这可能更简单，使用.prev()而不是.next()复制功能，以获取prev按钮的代码。

$('fieldset.step').hide().eq(0).show();

$('#next-step').click(function() {

    var current = $('fieldset.step:visible'),
        next = current.next('fieldset.step');
    if (next.length === 0) {
        next = current.nextUntil('fieldset.step').next('fieldset.step');
    }
    current.hide();
    next.show();
    if (next.nextUntil('fieldset.step').next('fieldset.step').add(next.next('fieldset.step')).length === 0) {
        $("#next-step").prop("disabled",true);
    }
    $("#previous-step").prop("disabled",false);
});

$('#previous-step').click(function() {

    var current = $('fieldset.step:visible'),
        prev = current.prev('fieldset.step');
    if (prev.length === 0) {
        prev = current.prevUntil('fieldset.step').prev('fieldset.step');
    }
    current.hide();
    prev.show();
    if (prev.prevUntil('fieldset.step').prev('fieldset.step').add(prev.prev('fieldset.step')).length === 0) {
        $("#previous-step").prop("disabled",true);
    }
    $("#next-step").prop("disabled",false);
});

不要忘记提供需要通过.step类循环的字段集。不再需要id。

Fiddle

Answer 2

试试这个

$(document).ready(function() {
    var fieldsets = $('#product_create>fieldset');
    var now = 0; // currently shown fieldset
    fieldsets.hide().first().show(); // hide all fieldsets except first
    $("#next-step").click(function() {
        fieldsets.eq(now).hide();
        now = (now + 1 < fieldsets.length) ? now + 1 : 0;
        fieldsets.eq(now).show(); // show next
        if(now + 1 == fieldsets.length)
        {
            $("#next-step").attr("disabled", "disbaled");
        }
        else if(now + 1 >= 1)
        {
            $("#previous-step").removeAttr("disabled");
        }
    });
    $("#previous-step").click(function() {
        fieldsets.eq(now).hide();
        now = (now > 0) ? now - 1 : fieldsets.length - 1;
        fieldsets.eq(now).show(); // show previous
        if(now == 0)
        {
            $("#previous-step").attr("disabled", "disabled");
        }
        else
        {
            $("#next-step").removeAttr("disabled");
        }
    });
});

FIDDLE

Answer 3

由于您使用索引跟踪元素，因此您可以使用简单的技术（例如

）选择下一个和上一个元素

var previous = $('fieldset').eq(step-1); // To select previous

var next = $('fieldset').eq(step+1); // To select next

但我认为你正试图创造这种效果：http://jsfiddle.net/c48bs/

点击按钮获取下一个/上一个ID

3 个答案: