0

私はこの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>

前/次を表示を切り替えたり非表示にしたりするには、クリックしたときに前/次のフィールドセット要素の ID を取得する必要がありますが、次の$(input[name="next"])コード$(input[name="previous"])を作成しました。

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

しかし、それはうまく機能していません、誰か助けてもらえますか？

4

3 に答える 3

5

これはおそらくより簡単で、前のボタンのコードを取得する.prev()代わりに機能を複製します。.next()

$('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 は不要になりました。

フィドル

于 2013-09-10T17:53:51.400 に答える
1

これを試して

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

フィドル

于 2013-09-10T17:58:29.613 に答える
0

要素をインデックスで追跡しているため、次のような単純な手法を使用して次の要素と前の要素を簡単に選択できます

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

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

しかし、あなたはこの効果を生み出そうとしていると思います: http://jsfiddle.net/c48bs/

于 2013-09-10T17:46:41.293 に答える