javascript - 单击具有字符串名称的一个类以激活另一个类

Question

我有下面的代码，它的工作原理是——当你点击一个随机字母(它有一个由字符串分配给它的类名)时，在不同的容器中显示另一个类，但与它具有相同的名称。

一个例子是A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

F O T B A L L

单击 aplhabet 中的 A 会更改 A 在 football 一词中的可见性这是代码:

$('.answer, .answer2, .answer3').click(function(){
    answer.push($(this).data("value"));                                             //push clicked to array
    checkString = answer.toString();                                                //convert to string
    checkAnswer = checkString.split("");                                            //split string
    console.log(answer);                                                            //display the answer in console
    $('#page1').hide();                                                             //hide page 1
    $('#page2').show().append('<div id="answer"></div>');           //show answer on page, each char needs to be wrapped

    for(var i = 0; i < checkAnswer.length; i++) {
      $('#answer').append('<span class="answer-string ' + checkAnswer[i] + '" data-answer="' + checkAnswer[i] + '">' + checkAnswer[i] + '</span>');   
    }
});


$('#page2').each(function (i) {
    var keyboard = '';
    for(var i = 97; i <= 122; i++) {
        keyboard += '<div class="letter" data-letter="'+String.fromCharCode(i)+'">'+String.fromCharCode(i)+'</div>';
    }
    $(this).append(keyboard);
});

$('.letter').each(function(ev){                                                     //each letter
        $(this).one('click', function(ev){                                              //when clicked
            $(this).css("opacity", "0.8");
            console.log($(this).data("letter"));                                        //log the clicked letter

            if(checkAnswer.indexOf($(this).data("letter"))!=-1) {                       //if clicked letter is in string display success
                $(this).css("background", "rgb(145, 255, 185)");
                console.log("YES");
            }

理想情况下，如果 checkAnswer 有被点击字母的索引，将 css 添加到与被点击字母相同的 span 类，希望这是有意义的!

http://jsfiddle.net/xA3YT/在这里 fiddle ，虽然，忽略功能，因为它只是我的工作方式 - 基本上，当字母变绿(或在控制台日志中说是)时，它应该显示 <span> 之一 (脚本第 16 行)在 #answer 内，显然我知道如何激活 CSS，但我不知道如何触发它是否类匹配(这可能是我忽略的非常简单的事情，我不确定 - 谢谢!)

Answer 1

只需根据被点击的字母创建一个类选择器:

$("." + $(this).data("letter")).css('visibility', 'visible');

JSFiddle here (在第 33 行添加此代码)