单击下一个/上一个按钮时，如何将活动类更改为LI元素？

Question

我有这个HTML标记：

<ul style="text-align: center;" class="product-wizard-bar">
    <li style="cursor:default" class="active" data-display="categories-picker" id="tab1"><a href="#">Seleccionar categoría</a></li>
    <li data-display="product-create-step-2" id="tab2" class=""><a href="#">Datos</a></li>
    <li style="display: none" data-display="product-create-step-3" id="tab3"><a href="#">Variaciones</a></li>
    <li data-display="product-create-step-4" id="tab4" class=""><a href="#">Detalles del Producto</a></li>
    <li data-display="product-create-step-5" id="tab5" class=""><a class="last" style="cursor:default" href="#">Condiciones de Venta</a></li>
</ul>
<fieldset title="Categoría" class="fstep" id="categories-picker" style="display: none;"></fieldset>
<fieldset style="display: none;" title="Producto" class="fstep" id="product-create-step-2"></fieldset>
<fieldset style="display: none" title="Variaciones" id="product-create-step-3"></fieldset>
<fieldset style="display: none;" title="Detalles" class="fstep" id="product-create-step-4"></fieldset>
<fieldset style="display: none;" title="Condiciones" class="fstep" id="product-create-step-5"></fieldset>

<div style="position:absolute; right:0px; margin-top: 20px; margin-bottom: 20px;">
    <button disabled="disabled" id="previous-step" name="previous" type="button" class="button">« Anterior</button>
    <button id="next-step" name="next" type="button" class="button">Siguiente »</button>
</div>

这是处理下一个/上一个步骤的jQuery代码：

$('fieldset.fstep').hide().eq(0).show();
$('#next-step').click(function() {
    var current = $('fieldset.fstep:visible'), next = current.next('fieldset.fstep');
    var category_id = $("#selected_category").val();

    if (next.length === 0) {
        next = current.nextUntil('fieldset.fstep').next('fieldset.fstep');
    }

    current.hide();
    next.show();

    if (next.nextUntil('fieldset.fstep').next('fieldset.fstep').add(next.next('fieldset.fstep')).length === 0) {
        $("#next-step").prop("disabled", true);
    }

    $("#previous-step").prop("disabled", false);
});

$('#previous-step').click(function() {
    var current = $('fieldset.fstep:visible'), prev = current.prev('fieldset.fstep');
    var category_id = $("#selected_category").val();

    if (prev.length === 0) {
        prev = current.prevUntil('fieldset.fstep').prev('fieldset.fstep');
    }

    current.hide();
    prev.show();

    if (prev.prevUntil('fieldset.fstep').prev('fieldset.fstep').add(prev.prev('fieldset.fstep')).length === 0) {
        $("#previous-step").prop("disabled", true);
    }

    $("#next-step").prop("disabled", false);
});

$("#product_create").on("click", "#tab1, #tab2, #tab3, #tab4, #tab5", function() {
    var div = $('#' + $(this).data('display'));

    $("li.active").removeClass("active");
    $(this).addClass('active');

    if ($.trim(div.html()) !== '') {
        $('#' + $(this).data('display')).show().siblings('fieldset').hide();
    }
    return false;
});

如何根据我所在的字段集将active类更改为元素？ 我的意思是当我单击“下一个/上一个”按钮时？

Answer 1

由于显示项目的id和向导栏项目的data-display属性相同，因此您可以使用它来过滤和添加活动类

var $fsteps = $('fieldset.fstep').hide();
var $wizitems = $('.product-wizard-bar > li');
$fsteps.eq(0).show();
$('#next-step').click(function () {
    var current = $fsteps.filter(':visible'),
        next = current.next('fieldset.fstep');
    var category_id = $("#selected_category").val();

    if (next.length === 0) {
        next = current.nextUntil('fieldset.fstep').next('fieldset.fstep');
    }

    current.hide();
    next.show();

    $wizitems.filter('.active').removeClass('active')
    $wizitems.filter('[data-display="' + next.attr('id') + '"]').addClass('active')

    if (next.nextUntil('fieldset.fstep').next('fieldset.fstep').add(next.next('fieldset.fstep')).length === 0) {
        $("#next-step").prop("disabled", true);
    }

    $("#previous-step").prop("disabled", false);
});

$('#previous-step').click(function () {
    var current = $fsteps.filter(':visible'),
        prev = current.prev('fieldset.fstep');
    var category_id = $("#selected_category").val();

    if (prev.length === 0) {
        prev = current.prevUntil('fieldset.fstep').prev('fieldset.fstep');
    }

    current.hide();
    prev.show();

    $wizitems.filter('.active').removeClass('active')
    $wizitems.filter('[data-display="' + prev.attr('id') + '"]').addClass('active')

    if (prev.prevUntil('fieldset.fstep').prev('fieldset.fstep').add(prev.prev('fieldset.fstep')).length === 0) {
        $("#previous-step").prop("disabled", true);
    }

    $("#next-step").prop("disabled", false);
});

$("#product_create").on("click", "#tab1, #tab2, #tab3, #tab4, #tab5", function () {
    var div = $('#' + $(this).data('display'));

    $("li.active").removeClass("active");
    $(this).addClass('active');

    if ($.trim(div.html()) !== '') {
        $('#' + $(this).data('display')).show().siblings('fieldset').hide();
    }
    return false;
});

演示： 小提琴