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

Click one class with string name to activate another class

本文关键字:另一个 激活 字符串 一个 单击      更新时间:2023-10-09

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

例如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

从aphabet中单击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="answerswer"></div>');           //show answer on page, each char needs to be wrapped
    for(var i = 0; i < checkAnswer.length; i++) {
      $('#answer').append('<span class="answerswer-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/不过,在这里,忽略功能,因为这只是我的工作方式-基本上,当字母变为绿色(或在控制台日志中表示是)时,它应该显示#answer中的一个<span>(脚本的第16行),很明显,我知道如何激活CSS,但我不知道如何触发它,无论类是否匹配(这可能是一件非常简单的事情,我忽略了,我不确定-谢谢!)

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

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

这里的JSFiddle(在第33行添加了此代码)