重新编写jQuery脚本以利用类/ID的通配符目标

我目前有一个（相当大的）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');
    }
});
});

第二个示例

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

第三个示例

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

第四个示例

/* 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更具功能性或更易于使用

出于参考目的，这里有一个实际使用这些脚本的页面：

---

如果您有任何帮助/建议，我们将不胜感激。

我将为您提供第一个模块的示例。这里有

#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'),
        ...

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

---

顺便问一下，除了单击的元素

id
之外，第一个和第二个代码是完全相同的吗？
是的，除了引用的id之外，这两个代码应该是相同的，我想
|
可能是正确的。谢天谢地，您的建议不需要对HTML进行太多更改，因为它已经在各种元素上有了相当广泛的类集，以实现目标。实际上，我只需要重新编写脚本，然后添加
data stepnum
属性。好的，我将整个脚本文件的行数减少到了不到70行（原来的400行）。这是一个巨大的进步，但我似乎无法让重置和雪佛龙脚本发挥作用。我已经继续并更新了使用的页面：。我不确定导致这两个脚本无法工作的错误在哪里。看起来可能只是一些嵌套问题。现在一切似乎都在运转。谢谢您的帮助。@Zyniker，在这种情况下我不知道如何使用
| |
，但是
jQuery（'.tutorial-toc-step-c'）。添加（'.tutorial-title-title-step-c'）。单击（function（）{…}）
应该可以工作-在两个元素集上放置相同的处理程序。