Lorsque l’utilisateur entre le texte correct, une image survole / change

Je conçois un site d’apprentissage linguistique. Je veux l’avoir lorsque quelqu’un entre du texte dans la zone de texte, il commence à survoler certaines images. Regardez mon échantillon ci-dessous

http://soffr.miximages.com/javascript//

Ainsi, lorsque l’utilisateur entre “na”, le premier symbole est mis en surbrillance, comme vous le voyez dans mon exemple. Lorsqu’il entre “ma”, le deuxième symbole doit être mis en évidence / basculé. Je veux que tous les symboles restnt remplacés tant que le texte correct est entré. Ainsi, si l’utilisateur tape “nama”, les deux premiers symboles doivent être remplacés pour indiquer qu’ils l’ont correctement corrigé et une fois que le dernier texte correct est entré, ils sont tous les trois remplacés.

Cela peut-il être fait? J’accepterai des méthodes avancées et simples.

$(document).ready(function() { var text = ['na', 'ma', 'ba']; $("#elemID").on('keyup', function() { var typed = this.value; $.each(text, function(index, item) { if (typed.indexOf(item)!=-1) { $('li', 'ul').eq(index).find('img').addClass('correct'); }else{ $('li', 'ul').eq(index).find('img').removeClass('correct'); } }); }); });

VIOLON

MODIFIER:

En haut de votre page, dans la section , ajoutez:

Emballez ensuite le code dans document.ready, consultez le code modifié ci-dessus pour savoir comment procéder.

Lors du changement de la zone de saisie, vous pouvez faire quelque chose comme ceci: (totalement non testé)

 var parts = ["na", "ma", "blah"]; var start = 0; for (var i = 0; i < parts.length; i++) { var currentPart = parts[i]; var $img = $(".images img:nth-child(" + i + ")"); var end = start + currentPart.length; if (str.length >= end && str.slice(start, start + currentPart.length) == currentPart) { $img.addClass("highlight"); } else { $img.removeClass("highlight"); } start += currentPart.length; }