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 O T B A L L

点击aplhabet中的A会更改单词football中A的可见性这是代码：

$('.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/在这里摆弄，虽然忽略了功能，因为它只是我工作的方式 - 基本上，当字母变绿（或在控制台日志中说是）时，它应该显示之一{strong> <span> 中的#answer （脚本第16行），显然我知道如何激活CSS但我不知道如何触发它匹配（它可能是非常简单的我忽略，我不确定 - 谢谢！）

Answer 1

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

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

JSFiddle here（在第33行添加了此代码）

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

1 个答案: