在 Pangram 中设置字母类答案

【问题标题】：Set class on letters in Pangram在 Pangram 中设置字母类
【发布时间】：2011-06-05 18:43:50
【问题描述】：

我正在尝试在一组元素（字母表中的每个字母）上设置正确的类。每个元素都有 id #alpha_0 到 #alpha_25。如果输入中的字母出现一次，则将该字母设置为绿色。如果该字母出现多次，请将其设置为红色。如果它没有发生，那么什么都没有（黑色）

下面的代码只是我编造出来的一些不起作用的东西。

var isPangram = function() {
 var s = $('#input').val().toLowerCase();
 console.log(s);
 var alpha = letters[getAlphabet()].join('');
 console.log(alpha);
 var len = alpha.length;
 for (var i = 0; i < len; i++) {
  if (s.indexOf(alpha.charAt(i)) != -1) {
   if ($('#alpha_'+i).hasClass('green')) {
    // already matched, go red
   } else {
    // not matched, go green
   }
  } else {
   // no match
  }
 }
}

【问题讨论】：

标签： javascript jquery html css jquery-selectors

【解决方案1】：

如果你先快速找出每个字母的计数，然后设置类，这是最简单的。

(function($) {
  function getLetterCount(text) {
    var alphabet = 'abcdefghijklmnopqrstuvwxyz';
    var alphabetSet = alphabet.split('');

    var letterCount = {};
    $.each(alphabetSet, function() {
      letterCount[this] = 0;
    });

    var cleanText = text.toLowerCase().replace(/[^a-z]/g, '');

    $.each(cleanText.split(''), function() {
      letterCount[this]++;
    });

    return letterCount;
  }

  function setLetterClasses(letterCounts) {
    $('.letter').removeClass('green').removeClass('red');

    $.each(letterCounts, function(letter, count) {
      if (count > 0) {
        $('#alpha_' . (letter.charCodeAt(0) - 'a'.charCodeAt(0))).addClass(count > 1 ? 'red' : 'green');
      }
    });
  }

  function isPangram() {
    var text = $('#input').val();
    var letterCount = getLetterCount(text);

    setLetterClasses(letterCount);
  }
})(jQuery);

【讨论】：