Actualmente tengo un archivo JavaScript (bastante grande) que se utiliza para animar algunos elementos en una página. Hay cuatro 'conjuntos' de scripts utilizados en la página, cada conjunto contiene un número de scripts igual al número de pasos en el tutorial de la página. Lo que me gustaría hacer es volver a trabajar los scripts para que utilicen la orientación por comodines (si es posible) en lugar de usar la configuración actual (que es un script por función por paso). Voy a proporcionar el primer script de cada uno de los conjuntos:

Primer ejemplo

/* ToC List Togglers */
jQuery(document).ready(function() {
jQuery('#tutorial-toc-step-01').click(function() {
    if ( jQuery('.tutorial-glyph-check-step-01').hasClass('glyphicon-unchecked') && !jQuery('#tutorial-body-step-01').hasClass('in') ) {
        jQuery('.tutorial-glyph-check-step-01').removeClass('glyphicon-unchecked'),
        jQuery('.tutorial-glyph-check-step-01').addClass('glyphicon-check'),
        jQuery('.tutorial-glyph-chevron-step-01').removeClass('glyphicon-chevron-down'),
        jQuery('.tutorial-glyph-chevron-step-01').addClass('glyphicon-chevron-up'),
        jQuery('#tutorial-title-reset-step-01').removeClass('hidden');
    }
    else if ( jQuery('#tutorial-body-step-01').hasClass('in') ) {
        jQuery('.tutorial-glyph-check-step-01').removeClass('glyphicon-unchecked'),
        jQuery('.tutorial-glyph-check-step-01').addClass('glyphicon-check'),
        jQuery('.tutorial-glyph-chevron-step-01').removeClass('glyphicon-chevron-up'),
        jQuery('.tutorial-glyph-chevron-step-01').addClass('glyphicon-chevron-down'),
        jQuery('#tutorial-title-reset-step-01').removeClass('hidden');
    }
    else if ( !jQuery('#tutorial-body-step-01').hasClass('in') ) {
        jQuery('.tutorial-glyph-chevron-step-01').removeClass('glyphicon-chevron-down'),
        jQuery('.tutorial-glyph-chevron-step-01').addClass('glyphicon-chevron-up');
    }
    else {
        jQuery('.tutorial-glyph-chevron-step-01').removeClass('glyphicon-chevron-up'),
        jQuery('.tutorial-glyph-chevron-step-01').addClass('glyphicon-chevron-down');
    }
});
});

Segundo ejemplo

/* Step Panel Togglers */
jQuery(document).ready(function() {
jQuery('#tutorial-title-title-step-01').click(function() {
    if ( jQuery('.tutorial-glyph-check-step-01').hasClass('glyphicon-unchecked') && !jQuery('#tutorial-body-step-01').hasClass('in') ) {
        jQuery('.tutorial-glyph-check-step-01').removeClass('glyphicon-unchecked'),
        jQuery('.tutorial-glyph-check-step-01').addClass('glyphicon-check'),
        jQuery('.tutorial-glyph-chevron-step-01').removeClass('glyphicon-chevron-down'),
        jQuery('.tutorial-glyph-chevron-step-01').addClass('glyphicon-chevron-up'),
        jQuery('#tutorial-title-reset-step-01').removeClass('hidden');
    }
    else if ( jQuery('#tutorial-body-step-01').hasClass('in') ) {
        jQuery('.tutorial-glyph-check-step-01').removeClass('glyphicon-unchecked'),
        jQuery('.tutorial-glyph-check-step-01').addClass('glyphicon-check'),
        jQuery('.tutorial-glyph-chevron-step-01').removeClass('glyphicon-chevron-up'),
        jQuery('.tutorial-glyph-chevron-step-01').addClass('glyphicon-chevron-down'),
        jQuery('#tutorial-title-reset-step-01').removeClass('hidden');
    }
    else if ( !jQuery('#tutorial-body-step-01').hasClass('in') ) {
        jQuery('.tutorial-glyph-chevron-step-01').removeClass('glyphicon-chevron-down'),
        jQuery('.tutorial-glyph-chevron-step-01').addClass('glyphicon-chevron-up');
    }
    else {
        jQuery('.tutorial-glyph-chevron-step-01').removeClass('glyphicon-chevron-up'),
        jQuery('.tutorial-glyph-chevron-step-01').addClass('glyphicon-chevron-down');
    }
});
});

Tercer ejemplo

/* Chevron Togglers */
jQuery(document).ready(function() {
jQuery('#tutorial-title-chevron-step-01').click(function() {
    if ( !jQuery('#tutorial-body-step-01').hasClass('in') ) {
        jQuery('.tutorial-glyph-chevron-step-01').removeClass('glyphicon-chevron-down'),
        jQuery('.tutorial-glyph-chevron-step-01').addClass('glyphicon-chevron-up');
    }
    else {
        jQuery('.tutorial-glyph-chevron-step-01').removeClass('glyphicon-chevron-up'),
        jQuery('.tutorial-glyph-chevron-step-01').addClass('glyphicon-chevron-down');
    }
});
});

Cuarto ejemplo

/* Reset Togglers */
jQuery(document).ready(function() {
jQuery('#tutorial-title-reset-step-01').click(function() {
    if ( jQuery('.tutorial-glyph-check-step-01').hasClass('glyphicon-check') && jQuery('#tutorial-step-01').hasClass('in') ) {
        jQuery('.tutorial-glyph-check-step-01').removeClass('glyphicon-check'),
        jQuery('.tutorial-glyph-check-step-01').addClass('glyphicon-unchecked');
    }
    else {
        jQuery('.tutorial-glyph-check-step-01').removeClass('glyphicon-check'),
        jQuery('.tutorial-glyph-check-step-01').addClass('glyphicon-unchecked');
    }
});
});

Como probablemente pueda adivinar, esta configuración actual se vuelve un poco incómoda en las páginas que tienen más de unos pocos pasos (y casi no se puede trabajar en una página con docenas de pasos). Si es posible, me gustaría volver a trabajar estos scripts para que funcionen independientemente del número de pasos. Como se puede ver en los scripts, los pasos y sus elementos se identifican y clasifican de forma sistemática y exhaustiva, lo que debería ayudar en cierta medida. Si es necesario, el HTML se puede editar para incluir fid u otros atributos / elementos para hacer que jQuery sea más funcional o más fácil de usar.

Para propósitos de referencia, aquí hay una página que está usando estos scripts:http://wordpress.omnifora.com/tutorials/create-a-button-to-change-the-font-on-your-site/.

Cualquier ayuda / sugerencia será muy apreciada.