重做jQuery脚本以利用类/ ID的通配符目标 [英] Rework jQuery Scripts to Utilize Wildcard Targeting of Classes/Ids
问题描述
我目前有一个（相当大的）JavaScript文件，用于为页面上的某些元素设置动画。在页面上使用了四组脚本，每组脚本包含的许多脚本与页面上教程中的步骤数量相同。我想要做的是重写脚本，以便他们将使用通配符定位（如果可能），而不是使用当前设置（每个功能每个步骤一个脚本）。我将提供每个集合中的第一个脚本：
第一个示例
/ * ToC List Togglers * /
jQuery（document）.ready（function（）{
jQuery（'＃tutorial-toc-step-01'）。单击（函数（）{
if（jQuery（'。tutorial-glyph-check-step-01'）。hasClass（'glyphicon-unchecked'）&&！jQuery（'＃tutorial-body-step （''glyphicon-unchecked'），
jQuery（'。 （'glyphicon-chevron-down'）。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'））{
jQuer （'。tutorial-glyph-check-step-01'）。removeClass（'glyphicon-unchecked'），
jQuery（'。tutorial-glyph-check-step-01'）。addClass（'glyphicon-检查'），
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 ''）。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（'。教程字形-字形步骤-01 '）addClass（' glyphicon-字形向下'）;
}
}）;
}）;
第二个示例
/ * Step Panel Togglers * /
jQuery（document）.ready（function（）{
jQuery（'＃tutorial-title-title-step- （'。tutorial-glyph-check-step-01'）。hasClass（'glyphicon-unchecked'）&&！jQuery（'＃tutorial'） （''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- ），
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-s （''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- （'hidden'）;
jQuery（'＃tutorial-title-reset-step-01'）。removeClass（'hidden'）;
else if（！jQuery（'＃tutorial-body-step-01'）。hasClass（'in'））{
jQuery（'。tutorial-glyph-chevron-step ''）。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（'。教程字形-字形步骤-01 '）addClass（' glyphicon-字形向下'）;
}
}）;
}）;
第三个示例
/ * 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- （'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（'。 （'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 ''）。hasClass（'in'））{
jQuery（'。tutorial-glyph-check-step-01'）。removeClass（'glyphicon-check'），
jQuery（'。 （''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/ 。
我会给你提供第一个块的例子。你有＃tutorial-toc-step-01 。因此，给所有类似的元素一个类，例如 tutorial-toc-step-c 以及将该数字保存在附加字段中，例如数据stepnum = '01' 。然后，代码的开始就像这样：
$ p $ / * 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'），
...
我认为，这个想法是可以理解的，你必须以类似的方式重写这四个块中的每一个。
顺便说一句，was它打算第一个和第二个代码是完全相同的，除了点击元素 id ？
I currently have a (fairly sizable) JavaScript file which is used to animate some elements on a page. There are four 'sets' of scripts used on the page, each set contains a number of scripts equal to the number of steps in the tutorial on the page. What I would like to do is rework the scripts so that they will use wildcard targeting (if possible) instead of using the current setup (which is one script per function per step). I will provide the first script from each of the sets:
First Example
/* 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');
}
});
});
Second Example
/* 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');
}
});
});
Third Example
/* 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');
}
});
});
Fourth Example
/* 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');
}
});
});
As you can likely guess, this current setup gets a bit cumbersome on pages that have more than a few steps (and almost unworkable on a page with dozens of steps). If possible, I would like to rework these scripts so that they will work regardless of the number of steps. As you can tell from the scripts, the steps and their elements are systematically and thoroughly id'ed and classed, which should help to some extent. If necessary, the HTML can be edited to include fid's or other attributes/elements to make the jQuery more functional or easier to use.
For reference purposes, here is a page which is actually using these scripts: http://wordpress.omnifora.com/tutorials/create-a-button-to-change-the-font-on-your-site/.
Any help/suggestions will be greatly appreciated.
I'll give you an example for the first block provided. There you have #tutorial-toc-step-01. So, give all similar elements a class, for example, tutorial-toc-step-c as well as save the number in additional field, for example, data-stepnum='01'. Then, the beginning of the code would like like that:
/* 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'),
...
I think, the idea is understandable. You'll have to rewrite each of those four blocks in a similar way.
By the way, was it intended that the first and the second code is absolutely the same except the clicked element id?
这篇关于重做jQuery脚本以利用类/ ID的通配符目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
