Obecnie mam (dość spory) plik JavaScript, który służy do animowania niektórych elementów na stronie. Na stronie znajdują się cztery „zestawy” skryptów, każdy zestaw zawiera wiele skryptów równych liczbie kroków w samouczku na stronie. To, co chciałbym zrobić, to przepracować skrypty, tak aby korzystały z kierowania na symbole wieloznaczne (jeśli to możliwe) zamiast korzystać z bieżącej konfiguracji (co jest jednym skryptem na funkcję na krok). Dostarczę pierwszy skrypt z każdego zestawu:

Pierwszy przykład

/* 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');
    }
});
});

Drugi przykład

/* 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');
    }
});
});

Trzeci przykład

/* 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');
    }
});
});

Czwarty przykład

/* 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');
    }
});
});

Jak można się domyślić, ta aktualna konfiguracja staje się nieco uciążliwa na stronach, które mają więcej niż kilka kroków (i prawie nie działają na stronie z dziesiątkami kroków). Jeśli to możliwe, chciałbym przerobić te skrypty, tak aby działały niezależnie od liczby kroków. Jak można zauważyć ze skryptów, kroki i ich elementy są systematycznie i dokładnie identyfikowane i klasyfikowane, co powinno w pewnym stopniu pomóc. Jeśli to konieczne, HTML może być edytowany tak, aby zawierał fid lub inne atrybuty / elementy, aby uczynić jQuery bardziej funkcjonalnym lub łatwiejszym w użyciu.

Dla celów odniesienia tutaj znajduje się strona, która faktycznie używa tych skryptów:http://wordpress.omnifora.com/tutorials/create-a-button-to-change-the-font-on-your-site/.

Każda pomoc / sugestie będą bardzo mile widziane.