排行榜网站代码冗长且无法正确显示

Question

我正在尝试创建一个排行榜网站，但是代码非常冗长并且无法按预期工作。

两个破碎的班级和未排序的排行榜

如何让排行榜发挥作用并使代码更短？谢谢！！

GitHub 链接到所有代码...

重复的代码。这是针对一个类的，在代码中，它对每个 className[0] 重复，直到 className[27]。

if (className[14] == positionedValues[0]) {
  document.querySelector('.first').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '1'
} else if (className[14] == positionedValues[1]) {
  document.querySelector('.second').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '2'
} else if (className[14] == positionedValues[2]) {
  document.querySelector('.third').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '3'
} else if (className[14] == positionedValues[3]) {
  document.querySelector('.fourth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '4'
} else if (className[14] == positionedValues[4]) {
  document.querySelector('.fifth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '5'
} else if (className[14] == positionedValues[5]) {
  document.querySelector('.sixth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '6'
} else if (className[14] == positionedValues[6]) {
  document.querySelector('.seventh').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '7'
} else if (className[14] == positionedValues[7]) {
  document.querySelector('.eigth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '8'
} else if (className[14] == positionedValues[8]) {
  document.querySelector('.ninth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '9'
} else if (className[14] == positionedValues[9]) {
  document.querySelector('.tenth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '11'
} else if (className[14] == positionedValues[10]) {
  document.querySelector('.eleventh').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '11'
} else if (className[14] == positionedValues[11]) {
  document.querySelector('.twelveth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '12'
} else if (className[14] == positionedValues[12]) {
  document.querySelector('.thirteenth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '13'
} else if (className[14] == positionedValues[13]) {
  document.querySelector('.fourteenth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '14'
} else if (className[14] == positionedValues[14]) {
  document.querySelector('.fifteenth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '15'
} else if (className[14] == positionedValues[15]) {
  document.querySelector('.sixteenth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '16'
} else if (className[14] == positionedValues[16]) {
  document.querySelector('.seventeenth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '17'
} else if (className[14] == positionedValues[17]) {
  document.querySelector('.eighteenth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '18'
} else if (className[14] == positionedValues[18]) {
  document.querySelector('.nineteenth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '19'
} else if (className[14] == positionedValues[19]) {
  document.querySelector('.twentyth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '20'
} else if (className[14] == positionedValues[20]) {
  document.querySelector('.twentyFirst').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '21'
} else if (className[14] == positionedValues[21]) {
  document.querySelector('.twentySecond').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '22'
} else if (className[14] == positionedValues[22]) {
  document.querySelector('.twentyThird').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '23'
} else if (className[14] == positionedValues[23]) {
  document.querySelector('.twentyFourth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '24'
} else if (className[14] == positionedValues[24]) {
  document.querySelector('.twentyFifth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '25'
} else if (className[14] == positionedValues[25]) {
  document.querySelector('.twentySixth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '26'
} else if (className[14] == positionedValues[26]) {
  document.querySelector('.twentySeventh').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '27'
} else if (className[14] == positionedValues[27]) {
  document.querySelector('.twentyEighth').innerHTML = S1A
  document.querySelector('.S1A').innerHTML = ""
  document.querySelector('.S1A-rank').innerHTML = '28'
}

Answer 1

这是您的代码的一个非常简短的版本：

const positionClassNames =
[
  'first', 'second', 'third', 'fourth', 'fifth', 'sixth',
  'seventh', 'eigth', 'ninth', 'tenth', 'eleventh', 'twelveth',
  'thirteenth', 'fourteenth', 'fifteenth', 'sixteenth',
  'seventeenth', 'eighteenth', 'nineteenth', 'twentyth',
  'twentyFirst', 'twentySecond', 'twentyThird', 'twentyFourth',
  'twentyFifth', 'twentySixth', 'twentySeventh', 'twentyEighth'
];

// Iterate over all class names regardless of index.
for ( const name of className )
{
  // Iterate over all positioned values through the index.
  for ( const index in positionedValues )
  {
    if ( name == positionedValues[index] )
    {
      document.querySelector(`.${positionClassNames[index]}`).innerHTML = S1A;
      document.querySelector('.S1A').innerHTML = '';
      document.querySelector('.S1A-rank').innerHTML = index + 1;
    }
  }
}

它迭代

className

数组的每个项目值（从 0 到 27 或任何其他大小）。然后它迭代 28 个 PositionedValues（从 0 到 27 或任何其他大小）。

注意，如果放大

className

或

positionedValues

的大小，那么你还必须添加到

positionClassNames

相应的css类 名字在正确的位置。

由于没有其他背景，我无法确定这是解决您真正需求的最佳方法。