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

我将为您提供第一个块的示例。你有#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之外，第一个和第二个代码是否完全相同？

返工jQuery脚本以使用通配符定位类/ ID

1 个答案: