0

I have this 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>

In order to toggle or hide previous/show next I need to get the ID of the previous/next fieldset element when I click on $(input[name="next"]) or $(input[name="previous"]) but I made this code:

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

But it's not working fine, can any give me a help?

4

3 回答 3

5

This is probably simpler, duplicate the functionality with .prev() instead of .next() to get the code for the prev button.

$('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);
});

don't forget to give the fieldsets that need to be cycled through a .step class. The id's are no longer needed.

Fiddle

于 2013-09-10T17:53:51.400 回答
1

Try this

$(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

于 2013-09-10T17:58:29.613 回答
0

Since you are tracking the elements with their indexes, you can simply select the next and previous element using simple technique like

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

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

But I think you are trying to create this effect: http://jsfiddle.net/c48bs/

于 2013-09-10T17:46:41.293 回答