Нажмите один класс со строковым именем, чтобы активировать другой класс

У меня есть следующий код, который работает так: при нажатии на случайную букву (которая имеет имя класса, назначенное ей строкой) отображает другой класс в другом контейнере, но с тем же именем, что и он.Нажмите один класс со строковым именем, чтобы активировать другой класс

Пример может быть ABCDEFGHIJKLMNOPQRSTU VWXYZ

ФУТБОЛ

щелкающие А из aplhabet изменяет видимость в слове футболе Вот код:

$('.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"); 
      }

Так в идеале, если checkAnswerhas индекс щелкнутого письма, добавьте css в класс span с тем же письмом, что и один щелчок, надеемся, что это имеет смысл!

http://jsfiddle.net/xA3YT/ скрипку здесь, хотя, игнорировать функциональность, как это именно так, как я работаю - В принципе, когда письмо идет зеленый (или говорит да в лог консоли) он должен отображать один из <span> (строка 16 из сценария) в пределах #answer, очевидно, я знаю, как активировать CSS, но я не знаю, как вызвать его, соответствуют ли классы (это может быть что-то действительно просто, я не замечаю, им не уверен - спасибо!)

источник

2013-11-26 Anonymous

Вы можете создать [JSFiddle] (http://jsfiddle.net/), это будет е гораздо проще и быстрее найти решение – Satpal

Покажите свой HTML или создайте тестовый файл jsFiddle. – Khamidulla

@satpal http://jsfiddle.net/xA3YT/ скрипка здесь, хотя, игнорируйте функциональность, так как это именно то, как я работаю. В принципе, когда письмо идет зеленым (или говорит «да» в журнале консоли), оно должно отображать один из в #answer, очевидно, я знаю, как активировать CSS, но я не знаю, как вызвать его, соответствуют ли классы (может быть, это что-то действительно просто, я пропускаю, им не уверен - спасибо!) –

Просто создайте селектор классов на основе буквы, которую щелкнули:

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

JSFiddle here (добавил этот код на строке 33)

источник

2013-11-26 10:32:39 Shai

Большое спасибо, я просто не был уверен, как получить этот селектор внутри селектора, поскольку я всегда получал недопустимые ошибки идентификатора и т. Д. Спасибо человеку! –

Нажмите один класс со строковым именем, чтобы активировать другой класс

ответ

Смежные вопросы