jquery - 返工 jQuery 脚本以利用类/Id 的通配符定位

Question

我目前有一个(相当大的)JavaScript 文件，用于为页面上的某些元素设置动画。页面上使用了四“组”脚本，每组包含的脚本数量等于页面上教程中的步骤数。我想做的是重新编写脚本，以便它们将使用通配符定位(如果可能)而不是使用当前设置(每个函数每个步骤一个脚本)。我将提供每组的第一个脚本:

第一个例子

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

第二个例子

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

第三个例子

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

第四个例子

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

正如您可能猜到的那样，当前的设置在具有多个步骤的页面上会变得有点麻烦(并且在具有数十个步骤的页面上几乎行不通)。如果可能的话，我想重新编写这些脚本，以便无论步骤数如何，它们都能正常工作。从脚本中可以看出，这些步骤及其元素已系统且彻底地进行标识和分类，这在一定程度上应该有所帮助。如有必要，可以编辑 HTML 以包含 fid 或其他属性/元素，以使 jQuery 更具功能性或更易于使用。

出于引用目的，这里是一个实际使用这些脚本的页面:http://wordpress.omnifora.com/tutorials/create-a-button-to-change-the-font-on-your-site/ .

任何帮助/建议将不胜感激。

Answer 1

我将为您提供第一个 block 的示例。你有 #tutorial-toc-step-01。因此，给所有类似的元素一个类，例如 tutorial-toc-step-c 并将数字保存在附加字段中，例如 data-stepnum='01'。然后，代码的开头是这样的:

/* ToC List Togglers */
jQuery(document).ready(function() {
jQuery('.tutorial-toc-step-c').click(function() {
    var stepnum = $(this).data('stepnum');
    if ( jQuery('.tutorial-glyph-check-step-'+stepnum).hasClass('glyphicon-unchecked') && !jQuery('#tutorial-body-step-'+stepnum).hasClass('in') ) {
        jQuery('.tutorial-glyph-check-step-'+stepnum).removeClass('glyphicon-unchecked'),
        jQuery('.tutorial-glyph-check-step-'+stepnum).addClass('glyphicon-check'),
        ...

我想，这个想法是可以理解的。您必须以类似的方式重写这四个 block 中的每一个。

顺便问一下，除了被点击的元素 id 之外，第一个和第二个代码是否完全相同？