javascript - 在 Pangram 中设置字母类

Question

我正在尝试为一组元素(字母表中的每个字母)设置正确的类。每个元素都有 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
  }
 }
}

Answer 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);