Pangramの文字にクラスを設定してください

Question

私は要素（アルファベットの各文字）の上に正しいクラスを設定しようとしています。各要素はid＃alpha_0〜＃alpha_25を持ちます。入力中の文字が1回発生する場合は、その文字を緑に設定します。文字が複数回出現する場合は、赤に設定します。それが起こらない場合、何もしない（黒）

以下のコードは、私がうまく動作していないものです。

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